d3.js - 画了一条直线，但它是弯曲的 d3

Question

我试着用这条直线:

enter.append('line')
   .attr('class', 'lineClass')
   .style("stroke", "blue")
   .style("stroke-width", "1.5px;")
   .attr('x1', function(d) { return 500; })
   .attr('y1', function(d) { return 50; })
   .attr('x2', function(d) { return 800; })
   .attr('y2', function(d) { return 40; });

行属性将是带有数据的实际函数。看我的图，为什么线是歪的？如果代码没有问题，您是否知道可能导致此问题的原因？

Answer 1

原因是您在数据集的相同 x1/x2/y1/y2 上一次又一次地绘制相同的线。

这会使你的线条弯曲:

var svg = d3.select('svg');

var dataSet = [10,20,30,20,30,20,30,20,30,20,30,20,30,20,30,20,30];//many data 17 times you will draw line.

var myLine = svg.selectAll('line')
    .data(dataSet)
    .enter()
    .append('line')
   .style("stroke", "blue")

   .attr('x1', function(d) { return 100; })
   .attr('y1', function(d) { return 200; })
   .attr('x2', function(d) { return 300; })
   .attr('y2', function(d) { return 40; });

工作示例 here

现在弯曲会消失，因为你在 x1/x2/y1/y2 上画了一条线

var svg = d3.select('svg');

var dataSet = [10];//you will draw line ones

var myLine = svg.selectAll('line')
    .data(dataSet)
    .enter()
    .append('line')
   .style("stroke", "blue")

   .attr('x1', function(d) { return 100; })
   .attr('y1', function(d) { return 200; })
   .attr('x2', function(d) { return 300; })
   .attr('y2', function(d) { return 40; });

工作示例 here

所以简而言之，你不应该一遍又一遍地画同一条线......

希望这对您有所帮助!