如何在d3线图中的特定点之间对线段进行着色？

Question

我有一个简单的时间线图与动态更新的数据值。也就是说，我周期性地添加一个新的数据值，一旦达到“最大值”，当添加一个新值时，我开始从数据集中删除一个数据值。线图是“动画”，这是行得通的，因此一个新的点出现在线的右端，而最老的点从左边消失。根据新数据的某些属性（要绘制的值和其他相关值），我需要更改连接最新数据值和一定数量的先前绘制数据值的线段的外观。

例如，假设数据值是一个由{Time，DataValueToPlot，FlagValue}组成的简单“对象”。正如我所说我目前正在绘制每个数据对象的“DataValueToPlot”对X轴的时间。假设绘制的最后3个值是（1 PM 10），（2 PM 20）和（3 PM 30）（尽管实际时间不统一）。我们绘制了10,20和30.现在一个新值（4 PM15）到达并且15值被添加到线图中，但是这个新值具有关联的FlagValue，其指示前三个线段将是比如用红色表示大笔画宽度。这如何实现？

需要说明的是，只要有任何数据值超过或低于指定值，我就不会要求绘制彩色线段，而是需要能够更改所选线段的外观。

======================= RESPONSE to @jshanley 感谢您的示例代码。我发现它可以让我将适当的颜色与“线条”（分段）相关联，但我无法使其工作。我原本所使用的数据阵列与其中I中使用的行函数描述如何绘制的数据点，诸如SVG路径结合共用图案：

lineFcn = d3.svg.line() 
     .x(function(d) { return(d.Time); }) 
     .y(function(d) { return(d.DataValueToPlot); }) 
     .interpolate("linear"); 
var svgContainer = d3.select("body").append("svg") 
            .attr("width",500) 
            .attr("height",500); 
var lineGraph = svgContainer.append("path") 
          .attr("d", lineFcn(lineData)) 
          .attr("stroke","black") 
          .attr("stroke-width",1) 
          .attr("fill","none"); 

这种方法的问题是，我不能不要将你的建议应用于它，因为你正在将笔画属性与每个“行”（分段）相关联，但在上面的代码中我们没有任何这样的元素。我试图重写代码，以便我不使用svg行（）辅助函数的svg路径，而只是创建一个单独的“线段”集合。这意味着在你的“输入”代码块中，我们扩展了selection.enter（）。append（'line'）来添加X1，Y1和X2，Y2坐标，但这是问题所在。我找不到任何方法可以让我定义这些值。

我想你的建议扩展到类似：

selection.enter().append('line') 
     .attr("x1",function(d,i) { return(d[i-1].Time); }) 
     .attr("y1",function(d,i) { return(d[i-1].DataValueToPlot)); }) 
     .attr("x2",function(d,i) { return(d].Time); }) 
     .attr("y2",function(d,i) { return(d].DataValueToPlot)); }) 

而是参考 “d [I-1]” 触发一个错误。

1）访问函数是否有某种方式来引用“先前”数据值？ 2）您是否可以扩展先前的代码示例以向我展示如何实际绘制要设置笔画属性的每个线段？

谢谢！

Answer 1

假设您使用的是标准Enter，Update，Exit模式described here，您可以在更新部分插入一些分支逻辑，并根据是否出现FlagValue切换颜色或其他样式。

function update(data) { 

    // reset the flag 
    var flagged = false; 

    var selection = svg.selectAll('line') 
    .data(data); 

    // ENTER 
    selection.enter().append('line') 
    // adding the attribute is superfluous 
    // but it gives us a callback in which 
    // we can set `flagged` to `true` 
    .attr('data-flagged', function(d) { 
     if (d.FlagValue === true) { 
     flagged = true; 
     return true; 
     } else { 
     return false; 
     } 
    }); 

    // ENTER + UPDATE 
    // set the stroke based on whether `flagged` is true 
    selection.attr('stroke', function(d) { 
    if (flagged) { 
     // could also add more conditional 
     // logic here to change only certain lines 
     // for example 
     // if (d.time < someTimeVar) { return 'blue'; } 
     return 'red'; 
    } else { 
     return 'green'; 
    } 
    }); 

    // EXIT 
    selection.exit().remove(); 

}