0

I'm plotting paths on a map in D3 using canvas (although it seems to happen using SVG too) and I am getting little dots where the lines connect. This seems to only happen on Chrome and Firefox. Safari seems to be fine.

I'm also getting little white dots sometimes when drawing circles. See the zoomed in image for further detail.

Has anyone else come across this and found a way to reduce these artifacts? Or is this just in the way Chrome and Firefox renders d3 paths (I've noticed it in normal paths and also geoPaths)?

I can fix the black dots by making the path stroke wider, but our designer wants thin strokes.

d3 geopath artifacts

phocks
  • 2,933
  • 5
  • 27
  • 28
  • 2
    The black dots just look like an artifact of anti-aliasing to me. – david25272 Sep 25 '17 at 05:07
  • Possible duplicate of https://stackoverflow.com/questions/41763580/svg-rendered-into-canvas-blurred-on-retina-display/41776757 (I don't vote to close this one since I prefer to have your feedback first, but tell me through an `@Kaiido` comment if it fits your needs so that I can close it.) – Kaiido Sep 28 '17 at 00:58
  • 1
    @Kaiido no I don't think this is the same issue. I have manually zoomed in this image and I'm not viewing it on a retina High DPI screen. I have put in place this module which scales on retina devices https://www.npmjs.com/package/canvas-dpi-scaler the issue remains but is less noticeable. – phocks Sep 28 '17 at 01:10
  • Alright, I will leave the comment in case it helps a future reader. For your problem, is it possible for you to create an [MCVE] (with an emphasis on *"Minimal"*)? – Kaiido Sep 28 '17 at 01:21

1 Answers1

0

I managed a kind of a fix for the intermittent dot "stitches" I was getting. I noticed that if I made the context.lineWidth = 1.1 then the dark dots disappeared. But then the line was too dark, so I simply set the context.strokeStyle to an rgba value with the alpha as 0.5.

So here's the code: 

// Draw outline of countries
context.beginPath();
context.strokeStyle = "rgba(29,60,67,0.5)";
context.lineWidth = 1.1;
path(borders);
context.stroke();

And here's the result:

line width example

(Note: I'm still getting the little white dots, but they aren't as noticeable.)

phocks
  • 2,933
  • 5
  • 27
  • 28