D3 topology rendering issue in Chrome

katahdin Published at Dev

katahdin

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

boundary topology error

Peter

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-12

Comments

0 comments

Prev: Symfony2: How to install the dev-master version of Doctrine to resolve "Erroneous data format for unserializing" with composer?

From Dev

Related Related

Article

D3 topology rendering issue in Chrome

D3 topology rendering issue in Chrome

android / chrome web font rendering issue - vertical/width cropping

Sunburst D3 text issue

D3 Dependency Wheel not rendering properly

Google Chrome Issue Rendering Font From @font-face

3 column layout rendering issue

Google chrome font rendering issue

d3 + leaflet path fill issue

d3 axis rendering outside the SVG

NVD3 Legend Color Guide Rendering Issue - No color appearing in color guide in tooltip within Internet Explorer / Chrome

chrome overall font rendering issue 2016

D3 Bollinger Band Issue

D3 layout tree is not rendering

Sunburst D3 text issue

Strange rendering issue in Chrome, Opera and Safari

Google chrome graphical issue rendering black squares

Font-face glyph rendering issue on Chrome and Opera

Weird Chrome font rendering issue on Ubuntu, numbers only?

Google Chrome Issue Rendering Font From @font-face

three.js rendering issue with chrome - uncaught typeerror

d3 image in circle not rendering properly

TopoJSON rendering issues using D3

D3 Line with JSON Data, Not Rendering

Dots of Scatterplot in d3 are not rendering

chrome rendering issue of hindi font

Chrome Version 58.0.3000.4 dev (64-bit) CSS rendering issue

Chrome rendering issue on MacBook Pro (OSX 10.9.5) with a menu bar : white space between <td> itself containing <div>

D3 slider issue

D3 output not rendering in Safari, Firefox, Edge and IE. Works in Chrome

Rendering issue in Chrome due to @Font-Face