D3 topology rendering issue in Chrome

Question

The map below shows the town boundaries for a state in the US. In FF and Safari the town boundaries render properly, but in Google Chrome many of the boundary arcs are connected to the wrong nodes. My code follows the excellent tutorial here. The portion of my code that renders the interior boundaries is the culprit, and I tried sorting the topology features, but it had no effect. Here is the snippet:

    svg.append("path")
    .datum(topojson.mesh(maine, maine.objects.subunits, function(a, b) { return a !== b }))
    .attr("d", path)
    .attr("class", "subunit-boundary interior");

A full example of the site is here

Answer 1

I believe your issue is due to this Chrome bug:

Issue 364866: SVG stroke-dasharray applies dashes across disconnected (M) path segments.

Try removing the stroke-dasharray setting from your css. Hopefully you can live without the dashed borders.