带有不规则阈值字段的折线图/图表 [英] Line chart/graph with an irregular threshold field

问题描述

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

Looking to create a bar chart with an irregular, colored threshold field in the background, so that each data point has its own individual set of min/max thresholds, which ultimately would look something like this: http://dcalvitti.webs.com/plant/SAMPLE.png

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

Looked at D3 examples like this one: http://bl.ocks.org/mbostock/4062844

后面的例子可以看起来更像我创建的图像吗？

Can the latter example be manipulated to look more like the image I created?

提前感谢。

推荐答案

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

The graph shown in your sample image is actually much easier than the linked example; for that, you don't need to create a clipping path and you don't need to draw the line twice with two different colours.

为了绘制彩色背景，请使用通过 d3创建的区域路径生成器。 svg.area（） 。设置 y0 存取器函数可以提取数据数组中每个点的最小值，并且 y1 存取器函数

For drawing the coloured background, use an area-path generator, created with d3.svg.area(). Set the y0 accessor function to be extract your minimum value for each point in your data array, and the y1 accessor function to extract the maximum value.

然后绘制一条直线图，使用 d3.svg.line（）路径生成器。

Then draw the line overtop as a normal line graph with a d3.svg.line() path generator.

工作实例，改编自评论中的fiddles： http://jsfiddle.net/h45CD/12/

（注意：我注释掉了一半的数据集，因为年值重复，

Working example, adapted from the fiddles in the comments: http://jsfiddle.net/h45CD/12/
(Note: I commented out half the dataset, since the "year" values were repeated, not sure what that was supposed to represent.)

键码：

// 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> 元素，并使用它来划线价值行。

If you do want a line that changes colour depending on historic values, as opposed to a line drawn overtop of a background range, the most straight-forward solution is probably to create a <pattern> element consisting of the different coloured regions, and use this to stroke the value line.

您将需要熟悉模式元素的不同选项。 此MDN教程具有良好的介绍，或者您可以深入了解完整的W3规范。

You'll want to familiarize yourself with the different options for the pattern element. This MDN tutorial has a good intro, or you could dive into the full W3 specs.

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

For this situation, we want the pattern to be sized and positioned relative to the coordinate system used for drawing the line, regardless of the size or shape of the line itself. That means we will be setting both the patternUnits and the patternContentUnits to be userSpaceOnUse. The height and width of the pattern will be the height and width of the plotting area.

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

Within the pattern we will draw the area that represents the max-min range, but we also need to draw separate areas, with different colours, for values above the max and values below the min. We can use the same area generator for each, but need to change the y0/y1 accessor functions each time.

键代码：

// 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/

这篇关于带有不规则阈值字段的折线图/图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！