Question

想要在背景中创建一个带有不规则彩色阈值字段的条形图，以便每个数据点都有自己独立的最小/最大阈值集，最终看起来像这样：http://dcalvitti.webs.com/plant/SAMPLE.png < / p>

看看像这样的D3示例：http://bl.ocks.org/mbostock/4062844

后一个例子可以被操作看起来更像我创建的图像吗？

提前致谢..

Answer 1

示例图片中显示的图表实际上比链接示例容易得多;为此，您不需要创建剪切路径，也不需要使用两种不同的颜色绘制两次。

要绘制彩色背景，请使用由d3.svg.area()创建的区域路径生成器。设置y0访问器函数以提取数据数组中每个点的最小值，并设置y1访问器函数以提取最大值。

然后使用d3.svg.line()路径生成器绘制直线作为法线图。

工作示例，改编自评论中的小提琴：http://jsfiddle.net/h45CD/12/
（注意：我注释掉了一半数据集，因为重复了“年份”值，不确定应该代表什么。）

密码：

// Define the value line path generator
var line = d3.svg.line()                        
    .x( function(d) { return x(d.year); } ) 
    .y( function(d) { return y(d.temp); } );

// Define the area path generator
var area = d3.svg.area()
    .x(  function(d) {  return x(d.year); } )
    .y0( function(d) { return y(d.min); } )
    .y1( function(d) { return y(d.max); } );

/* ... */

// Add the background area showing the historic range
svg.append("path")
   .datum(data)
   .attr("class", "historicRange")
   .attr("d", area);

// Add the value line 
svg.append("path") 
    .datum(data)
    .attr("class", "dataline")
    .attr("d", line);

根据评论进行修改

如果你做想要一条根据历史值改变颜色的线，而不是在背景范围之上绘制的线，那么最直接的解决方案可能是创建一个{{1元素由不同颜色的区域组成，并使用它来描边值线。

您需要熟悉模式元素的不同选项。 This MDN tutorial有一个很好的介绍，或者你可以潜入full W3 specs。

对于这种情况，我们希望图案的大小和位置相对于用于绘制线条的坐标系，无论线条本身的大小或形状如何。这意味着我们将<pattern>和patternUnits都设置为patternContentUnits。模式的userSpaceOnUse和height将是绘图区域的高度和宽度。

在模式中，我们将绘制代表最大最小范围的区域，但我们还需要绘制具有不同颜色的单独区域，用于高于最大值的值和低于最小值的值。我们可以为每个使用相同的区域生成器，但每次都需要更改y0 / y1访问器函数。

密码：

width

工作示例：http://jsfiddle.net/h45CD/14/

Answer 2

我在网页上添加了基于AMCharts并在该网站创始人的帮助下由我自己创作的图表链接。包含上述问题的几个例子以及更多..

http://dcalvitti.webs.com/SAMPLE/NEWWEBINDEX.html

提供的图表仍在处理中。例如，AMcharts确实有一个功能可以将一条线的颜色剪切到一个我不知道的特定值之上/之下，因此仍有工作要做。我在图表上花了好几个星期，以为我会分享。我相信有人会在路上找到新的东西......

具有不规则阈值字段的折线图/图表

2 个答案: