我正在使用SVG和D3创建条形图,并对如何着色它们有疑问.我在这个网站和其他网站上搜索了很多问题,但还没有找到任何有同样问题的人.
我希望每个条形图从底部开始有一种颜色(黄色,例如),并且随着条形图变得更高,逐渐混合更多的第二种颜色(例如红色),以便条形图处于最大潜力高度只是第二种颜色.在这个例子中,杆的顶部是潜在高度的一半将是橙色.
我能够编写一个函数来为任何给定高度的条形生成一个独特的线性渐变,可以根据需要为条形着色.
但是,由于此图表是动态的,并且随着数据的刷新,条形图的高度每秒可能会发生很多次变化,因此每次创建和应用新的渐变并且对于每个条形图肯定是无效的,并且可能导致刷新的严重滞后酒吧. (我承认除了静态测试用例之外我还没有尝试过这个,所以我最后的假设可能是错的.)
使用静态渐变当然会产生类似这样的颜色,其中颜色根据条的高度而不是区域的高度混合：
然而,在我想要的场景中,较小的条纹应分别具有非常小的红色或深蓝色.
最后,我的问题是：有办法吗？
>创建一个应用于SVG区域的渐变(简单)
>已经说过梯度蒙面(简单)
>然后在表示图形条形的矩形下方选择性地取消屏蔽？ (???)
或者,还有一些我忽视的技术吗？
谢谢
解决方法
这很容易实现,但有点难以理解,你需要指定渐变单位是userSpaceOnUse,然后通过x1,x2,y1,y2定义你想要它应用的区域：
var gradient = svg
.append("linearGradient")
.attr("y1",minY)
.attr("y2",maxY)
.attr("x1","0")
.attr("x2","0")
.attr("id","gradient")
.attr("gradientUnits","userSpaceOnUse")
gradient
.append("stop")
.attr("offset","0")
.attr("stop-color","#ff0")
gradient
.append("stop")
.attr("offset","0.5")
.attr("stop-color","#f00")
你可以在这里看到一个演示：http://jsfiddle.net/ZCwrx/