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

希望在背景中创建一个带有不规则彩色阈值字段的条形图，以便每个数据点都有自己的最小/最大阈值集，最终看起来像这样：

查看D3示例，如下所示：

后一个例子可以被处理成更像我创建的图像吗

---

提前感谢。

示例图像中显示的图形实际上比链接的示例简单得多；为此，不需要创建剪裁路径，也不需要使用两种不同的颜色绘制两次线

要绘制彩色背景，请使用使用创建的区域路径生成器。将

y0

访问器函数设置为提取数据数组中每个点的最小值，将

y1

访问器函数设置为提取最大值

然后使用

d3.svg.line（）

路径生成器将线覆盖绘制为普通线图

工作示例，根据注释中的小提琴改编：
（注意：我注释掉了一半的数据集，因为“年”值是重复的，不确定它应该代表什么。）

关键代码：

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

// 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)");        

---

根据评论进行编辑

如果您确实想要一条根据历史值改变颜色的线，而不是在背景范围的顶部绘制的线，最直接的解决方案可能是创建一个由不同颜色区域组成的

元素，并使用该元素来绘制值线

您需要熟悉pattern元素的不同选项。有一个很好的介绍，或者你可以深入到

对于这种情况，我们希望图案的大小和位置相对于用于绘制线的坐标系，而不管线本身的大小或形状。这意味着我们将

patternUnits

和

patternContentUnits

设置为

userSpaceOnUse

。图案的

高度

和

宽度

将是绘图区域的高度和宽度

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

关键代码：

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

// 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)");        

//添加显示历史范围的图案
var pattern=defs.append（“模式”）
.datum（data）//将数据添加到元素
//因此，它将被我们附加的每个
艾特先生({
“patternUnits”：“userSpaceOnUse”，
“patternContentUnits”：“userSpaceOnUse”，
“宽度”：宽度，
“高度”：高度
})
.attr（“id”，“strokePattern”）；
pattern.append（“路径”）
.attr（“类”、“历史扩展之间”）
.attr（“d”，区域）；
pattern.append（“路径”）
.attr（“类别”、“上述历史记录”）
.attr（“d”，区域y1（0）
.y0（函数（d）{返回y（d.max）；}）
);
pattern.append（“路径”）
.attr（“类别”、“以下历史记录”）
.attr（“d”，区域.y1（函数（d）{返回y（d.min）；}）
.y0（高度）
);
//添加值行
plot.append（“路径”）
.基准（数据）
.attr（“类”、“数据线”）
.attr（“d”，行）
.style（“笔划”、“url（#笔划模式）”）；

---

工作示例：

我正在添加一个网页链接，其中的图表是我自己根据AMCharts并在该网站创始人的帮助下编写的。包含上述问题的几个示例以及更多内容

---

提供的图表仍在编制中。例如，AMcharts确实有一个函数，它可以将某个我不知道的值上方/下方的线条的颜色进行剪辑，因此仍有工作要做。我花了很多周的时间在图表上，我想和大家分享一下。我相信将来会有人在这里发现新的东西…

您的示例图像无法加载。我能提供这个链接让你试着举例说明吗？不知道这是怎么联系的。如果没有你想要的彩色范围的数据，我不能给你看。我拿出了一个实际的工作图表。半曲线范围内的读数应为橙色或其他任何颜色，超出该范围的读数（高于最大值时为红色，低于最小值时为蓝色）将自动更改为这些颜色。澄清：您想要一条根据值改变颜色的线，还是像在您的示例图像中一样，在彩色背景上的线？当线超过或不满足某个值时，线会改变颜色。两条水平、略呈弧形的线表示特定的阈值。示例图像显示了背景中要更改颜色的区域。再次感谢您的回应和耐心。