带有不规则阈值字段的折线图/图形

Question

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

看着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); 

---

编辑基于评论

如果做想改变颜色取决于历史价值，而不是凌驾背景范围绘制的线一条线，最直接的解决办法可能是创建一个<pattern>元素组成，不同颜色的地区，并用它来抚摸价值线。

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

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

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

关键代码：

// Add the pattern showing the historic range 
var pattern = defs.append("pattern") 
    .datum(data) //add the data to the <pattern> element 
       //so it will be inherited by each <path> we append 
    .attr({ 
     "patternUnits":"userSpaceOnUse", 
     "patternContentUnits":"userSpaceOnUse", 
     "width": width, 
     "height": height 
    }) 
    .attr("id", "strokePattern"); 

pattern.append("path") 
    .attr("class", "historicRange between") 
    .attr("d", area); 

pattern.append("path") 
    .attr("class", "historicRange above") 
    .attr("d", area.y1(0) 
        .y0(function(d){return y(d.max);}) 
     ); 

pattern.append("path") 
    .attr("class", "historicRange below") 
    .attr("d", area.y1(function(d){return y(d.min);} ) 
        .y0(height) 
     ); 

// Add the value line 
plot.append("path")    
    .datum(data)    
    .attr("class", "dataline") 
    .attr("d", line) 
    .style("stroke", "url(#strokePattern)");   

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

Answer 2

我包括基于AMCharts，并与该网站的创始人的帮助下通过自己撰写的图表网页链接。包含上述的问题，更多的几个例子..

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

提供仍在制作的图表。例如，AMcharts确实有一个函数，可以将线条的颜色限制在某个我不知道的特定值之上/之下，因此仍有工作要做。我花了很多周在图表上，想我会分享。我敢肯定有人会在这里找到新的东西...