D3.js Why do some rectangles have wider strokes than others (in a stacked bar chart)?

Question

I've developed a Marimekko chart which is OK except that the lines around some rectangles appear to be 2px, whereas the rest are 1px. What can cause this?

Answer 1

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

Answer 2

I recall having this problem initially with D3. You have to shift the offending elements by 0.5 pixels to the left or right. That cleared up the problem for me. I read an article that pointed out the necessity of the approach, I just don't remember where.

Answer 3

Add the code below somewhere in your css:

svg {
  shape-rendering: crispEdges;
}

Most likely you will not have the problem you described anymore. I can't guarantee it, but chances are good. I use this code for all diagrams containing svg rectangles, and for the same reason.