如何使用SVG渐变来显示相对于彩色区域大小的不同颜色 [英] How to use SVG gradients to display varying colors relative to the size of the colored region

问题描述

我使用SVG和D3来创建条形图，并有一个关于如何着色的问题。我在这个网站和其他人搜索了很多问题，还没有发现任何人有相同的问题。

我想每个酒吧从底部开始一个颜色（黄色，例如），并且随着条纹变得更高，逐渐地混合更多的第二颜色（红色，例如），使得处于其最大电位高度的条将仅是第二颜色。在这个例子中，杆的顶部是其潜在高度的一半是橙色的。

我能够写一个函数来产生任何给定的

然而，由于这个图是动态的，并且条的高度可能每秒更改多次，因为数据被刷新，每次创建和应用新的渐变并且对于每个条柱绝对不是有效的，并且可能导致刷新条块的严重滞后。 （我承认我没有实际尝试过任何非静态测试用例，所以我可能错了最后一个假设。）

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

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

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

1. 创建一个应用于SVG区域本身的单个渐变（ easy ）


2. （ easy ）


3. 然后在表示图表条形的矩形下面选择性地取消隐藏？ （ ）

还是有其他技术可以忽略吗？

感谢

解决方案

这很容易实现，您需要指定梯度单位 userSpaceOnUse ，然后通过 x1 定义要应用的区域， x2 ， y1 ， y2 ：

  var gradient = svg 
 .append（linearGradient）
 .attr（y1，minY）$ b b .attr（y2，maxY）
 .attr（x1，0）
 .attr（x2，0）
 .attr ，gradient）
 .attr（gradientUnits，userSpaceOnUse）
 
渐变
 .append（stop）
 .attr ，0）
 .attr（stop-color，＃ff0）
 
渐变
 .append（stop）
 .attr offset，0.5）
 .attr（stop-color，＃f00）
  

您可以在这里看到演示： http://jsfiddle.net/ZCwrx/ p>

I'm using SVG and D3 to create bar graphs and have a question concerning how to color them. I've searched many questions on this site and others and haven't yet found anyone with the same issue.

I would like each bar to start at the bottom with one color, (yellow, e.g.) and, as the bar gets taller, progressively mix in more of the second color, (red, e.g.), so that the bars at their maximum potential height would be only the second color. In this example, the tops of the bars that are half their potential height would be orange.

I was able to write a function to produce, for a bar of any given height, a unique linear gradient that would color the bars as desired.

However, since this graph is dynamic and the heights of the bars may change many times per second as the data is refreshed, creating and applying a new gradient each time and for each bar is definitely not efficient and could result in serious lag in refreshing the bars. (I admit I haven't actually tried this with anything other than a static test case, so I could be wrong about that last assumption.)

Using a static gradient of course yields something like this, where the colors are mixed according to the height of the bar, not the height of the region:

In my desired scenario, however, the smaller bars should have very little red or dark blue respectively.

My question, finally, is this: is there a way to

1. create a single gradient that is applied to the SVG region itself (easy)
2. have said gradient masked somehow (easy)
3. then selectively unmasked underneath the rectangles representing the bars of the graph? (???)

Or, is there some other technique I'm overlooking?

Thanks

解决方案

This is simple to implement but a bit hard to grasp, you need to specify that the gradient units are userSpaceOnUse and then define the region where you want it to apply through 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")

You can see a demo here: http://jsfiddle.net/ZCwrx/

这篇关于如何使用SVG渐变来显示相对于彩色区域大小的不同颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！