画一条直线，但弯曲了d3 [英] Drew a straight line, but it is crooked d3

问题描述

我试图与此做一条直线:

I tried to make a straight line with this:

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; });

行属性将是具有数据的实际功能.看我的照片，为什么线条歪了?如果代码没有问题，那么您对导致此问题的原因是否有任何想法?

The line attrs will be actual functions with data. Look at my image, why is the line crooked? If there is no problem with the code, do you have any ideas as to what could be causing this?

推荐答案

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

The reason is you are drawing same line again and again on the same x1/x2/y1/y2 for dataset.

这会使您的线路歪曲:

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; });

工作示例此处

现在，弯曲会变得很简单，因为您在x1/x2/y1/y2上写了一行

Now the crookedness will go coz you are making a single line on the 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; });

工作示例此处

因此，简而言之，您不应该一遍又一遍地画同一条线...

So in short you should not be drawing same line over and over again...

希望这会有所帮助！

这篇关于画一条直线，但弯曲了d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！