I drew a straight line, but it is a d3 curve

Question

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

Linear attrs are valid data functions. Look at my image, why is the line curved? If you have no problem with the code, do you have any ideas as to what might be causing this?

Answer 1

The reason is because you are repeating the same row over and over on the same x1 / x2 / y1 / y2 for the dataset.

This will make your curve line:

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

Working example here

Now the curvature will go because you make one line on 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; });

Working example here

In short, you should not draw the same line again and again ...

Hope this helps!

Answer 2

, D3. aliasing . , anti-aliasing. , .

SVG — , ; , shape-rendering. , :

line {
  stroke: blue;
  stroke-width: 1;
}
text { font-family: monospace; }

<svg width="500" height="210" xmlns="http://www.w3.org/2000/svg">
  <text y="25">auto</text>
  <line shape-rendering="auto" x1="150" y1="20" x2="450" y2="30" />

  <text y="75">optimizeSpeed</text>
  <line shape-rendering="optimizeSpeed" x1="150" y1="70" x2="450" y2="80" />

  <text y="125">crispEdges</text>
  <line shape-rendering="crispEdges" x1="150" y1="120" x2="450" y2="130" />

  <text y="175">geometricPrecision</text>
  <line shape-rendering="geometricPrecision" x1="150" y1="170" x2="450" y2="180" />
</svg>

Hide result

# 3, shape-rendering="crispEdges", , , , . SVG :

...

, . , . . - DOM SVG. , CSS .

Answer 3

The line in the picture is not a curve - it is directly between the points (500.50) and (800.40).