javascript - 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，则为实线。