D3折线图中的实线和虚线

Question

我想使用D3构建折线图，这样当数据点减少时（即5,4,3,2），线条就是实线，当数据点增加时（即2,3,4,5）线是点缀的。

我在虚线http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html上发现了这个资源，只是想知道我将根据上下趋势包含逻辑。

Answer 1

如果从源和目标设置值（x1，y1）和（x2，y2），我会这样做：

    append('line')
    .attr('class',function(d){
       if(d.source.y < d.target.y){ //checks if line is sloping '+' or '-'
          return 'dashed';
       } else {
          return 'solid'
       }
    })
    .attr('x1', function(d){ return d.source.x})
    .attr('y1', function(d){ return d.source.y})
    .attr('x2', function(d){ return d.target.x})
    .attr('y2', function(d){ return d.target.y})

然后在你的CSS中你会有：

.solid{
   stroke:solid;
}

.dashed{
   stroke-dasharray: 5,5; 
}

如果值变为5然后是4，那么这将是虚线，但如果它变为4然后是5然后是4然后是4，那么它将是虚线。