Начертил прямую линию, но она кривая d3

Причина в том, что вы снова и снова рисуете одну и ту же линию на одном и том же 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; });

Рабочий пример здесь

Теперь кривизна исчезнет, ​​потому что вы делаете одну линию на 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; });

Рабочий пример здесь

Короче говоря, вы не должны рисовать одну и ту же линию снова и снова...

Надеюсь это поможет!

Во-первых, в этом виноват вовсе не D3. Этот эффект известен как псевдоним и очень часто встречается во всех видах компьютерной графики. Существует обширный арсенал контрмер против него, которые называются сглаживание. . Однако это всегда будет компромисс между точностью и эстетикой.

Для SVG вы, по крайней мере, в определенной степени можете контролировать, как браузер или любой другой пользовательский агент обрабатывает это, устанавливая shape-rendering. Взгляните на этот пример, который демонстрирует эффект:

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

<svg width="500" height="210" xmlns="https://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>

Поскольку строка № 3 с shape-rendering="crispEdges" очень похожа на ваш снимок экрана, это, скорее всего, причина вашей проблемы. Для этого значения в спецификации SVG указано:

Чтобы получить четкие края, пользовательский агент может отключить сглаживание для всех строк...

Чтобы получить более плавную линию, попробуйте установить другое значение для этого свойства. Обратите внимание, что это свойство передается по наследству. Нет необходимости повторять настройку для каждого элемента. С таким же успехом вы можете определить это где-нибудь вверх по иерархии DOM или даже в самом корневом элементе SVG. Кроме того, вы можете установить это с помощью правила CSS вместо того, чтобы указывать его как атрибут элемента.

Линия на вашем рисунке не кривая, а прямая между точками (500,50) и (800,40).