相关疑难解决方法(0)

我正在使用SVG和D3创建条形图,并对如何着色它们有疑问.我在这个网站和其他网站上搜索了很多问题,但还没有找到任何有同样问题的人.

我希望每个条形图从底部开始有一种颜色(黄色,例如),并且随着条形图变得更高,逐渐混合更多的第二种颜色(例如红色),以便条形图处于最大潜力高度只是第二种颜色.在这个例子中,杆的顶部是潜在高度的一半将是橙色.

我能够编写一个函数来为任何给定高度的条形生成一个独特的线性渐变,可以根据需要为条形着色.

但是,由于此图表是动态的,并且随着数据的刷新,条形图的高度每秒可能会发生很多次变化,因此每次创建和应用新的渐变并且对于每个条形图肯定是无效的,并且可能导致刷新的严重滞后酒吧.(我承认除了静态测试用例之外我还没有尝试过这个,所以我最后的假设可能是错的.)

使用静态渐变当然会产生类似这样的颜色,其中颜色根据条的高度而不是区域的高度混合:

然而,在我想要的场景中,较小的条纹应分别具有非常小的红色或深蓝色.

最后,我的问题是:有办法吗？

1. 创建一个应用于SVG区域的渐变(简单)
2. 说某种方式掩盖了渐变(简单)
3. 然后选择性地在表示图形条形的矩形下面进行遮盖？(???)

或者,还有一些我忽视的技术吗？

谢谢

我从这个例子中看到,如何在D3.js中制作一个弧,从弧的一端到另一端有一个1D的梯度.我还想从内圈到外圈施加径向梯度.这可能吗？