D3.js为什么某些矩形的笔触比其他矩形宽（在堆积的条形图中）？

Question

我已经开发了一个Marimekko图表，该图表还可以，除了一些矩形周围的线看起来是2px，而其余的是1px。 是什么原因造成的？

Answer 1

矩形的宽度或位置存在一个舍入问题。

Answer 2

我记得D3最初有这个问题。 您必须将有问题的元素向左或向右移动0.5个像素。 那为我解决了问题。 我读了一篇文章指出这种方法的必要性，我只是不记得在哪里。

Answer 3

将下面的代码添加到CSS中：

svg {
  shape-rendering: crispEdges;
}

您很可能不会再遇到您描述的问题了。 我不能保证，但是机会很好。 出于相同的原因，我将此代码用于所有包含svg矩形的图。