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则是固定的.