6

我正在使用 SVG 和 D3 创建条形图，并且有一个关于如何为它们着色的问题。我在这个网站和其他网站上搜索了很多问题，但还没有找到有同样问题的人。

我希望每个条都以一种颜色（例如黄色）从底部开始，并且随着条变高，逐渐混合更多的第二种颜色（例如红色），以使条具有最大潜力高度只是第二种颜色。在此示例中，处于其潜在高度一半的条形顶部将是橙色的。

我能够编写一个函数来为任何给定高度的条生成一个独特的线性渐变，该渐变可以根据需要对条进行着色。

但是，由于此图是动态的，并且随着数据的刷新，条形图的高度每秒可能会发生多次变化，因此每次为每个条形图创建和应用新的梯度肯定效率不高，并且可能导致刷新时严重滞后酒吧。（我承认我实际上除了静态测试用例之外没有尝试过这个，所以我对最后一个假设可能是错误的。）

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

使用静态渐变

然而，在我想要的场景中，较小的条应该分别有很少的红色或深蓝色。

最后，我的问题是：有没有办法

  1. 创建一个应用于 SVG 区域本身的渐变（简单）
  2. 已经说过以某种方式掩盖了渐变（简单）
  3. 然后有选择地在代表图形条形的矩形下方露出？（？？？）

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

谢谢

4

1 回答 1

16

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

于 2012-10-11T00:00:27.143 回答