svg - 如何使用SVG渐变来显示相对于彩色区域大小的不同颜色

Question

我正在使用SVG和D3创建条形图，并且对如何着色它们有疑问。我已经在该网站和其他网站上搜索了许多问题，但尚未找到任何遇到相同问题的人。

我希望每个条形以一种颜色(例如，黄色)从底部开始，并且随着条形变得越来越高，逐渐将更多的第二种颜色(例如红色)进行混合，以使条形图发挥最大的潜力高度将仅是第二种颜色。在此示例中，条形的顶部(其潜在高度的一半)将是橙色。

我能够编写一个函数来为任何给定高度的条产生一个唯一的线性渐变，该渐变将根据需要为条着色。

但是，由于此图是动态的，刷新数据时条形的高度每秒可能会变化很多次，因此每次创建并应用新的梯度并且对于每个条形绝对无效，并且可能会导致刷新图形时严重滞后。酒吧。 (我承认除了静态测试用例以外，我实际上没有尝试过其他方法，因此最后一个假设可能是错误的。)

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

但是，在我理想的情况下，较小的条形图应分别具有很少的红色或深蓝色。

最后，我的问题是:是否有办法

创建一个应用于SVG区域本身的简单渐变(简单)

说过以某种方式掩盖了渐变(简单)

然后有选择地在表示图形的条形的矩形下方取消 mask 吗？ (???)

或者，还有其他我要忽略的技术吗？

谢谢

Answer 1

这很容易实现，但有点难于掌握，您需要指定渐变单位为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/