My svg path gets pixelation with d3

Question

I'm working with d3, and I'm doing some line charts. The line charts never gave me problems, until I added another svg chart and it gets pixelated only in that view.

I dont know if you note this, but that chart is strange.

When I remove the other svg in the chart I get the chart normal.

I dont know if you can see the difference.

(I know that it's not the same chart, but that's not the point)

Answer 1

Check your SVG for the shape-rendering property. I can image that the other chart sets it to crispEdges or optimizeSpeed for every SVG element.

This value can make sense if your chart has only rectangular shapes (like a bar chart) as it will make the bars look "sharper", but you don't want it on any "round" shapes as they will appear pixelated.