画了一条直线，但它是弯曲的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; });

线条attrs将是具有数据的实际功能。看看我的形象，为什么线条会弯曲？如果代码没有问题，您对可能导致此问题的原因有任何疑问吗？

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

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

希望这有帮助！

Answer 2

首先，这根本不应归咎于D3。这种效应称为aliasing，对各种计算机图形都很常见。有一大堆针对它的对策，被称为anti-aliasing。然而，它始终是精确度和美学之间的权衡。

对于SVG，您至少在某种程度上可以通过设置shape-rendering属性来控制浏览器或任何其他用户代理处理此问题的方式。看看这个演示效果的例子：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

因为第{3行shape-rendering="crispEdges"非常类似于您的屏幕截图，所以这很可能是您遇到问题的原因。对于此值，SVG规范指出：

  

为了获得清晰的边缘，用户代理可能会关闭所有线路的抗锯齿...

要获得更平滑的线条，请尝试为此属性设置另一个值。请注意，此属性是继承的。没有必要重复自己在每个元素上设置它。您也可以在DOM层次结构的某个位置或甚至根SVG元素本身上定义它。此外，您可以选择通过CSS规则进行设置，而不是将其指定为元素的属性。

Answer 3

图片中的线条没有弯曲 - 它在点（500,50）和（800,40）之间是直的。