Problem z renderowaniem topologii D3 w Chrome

Question

Poniższa mapa pokazuje granice miasta dla stanu w USA. W FF i Safari granice miast są poprawnie renderowane, ale w Google Chrome wiele łuków granicznych jest podłączonych do niewłaściwych węzłów. Mój kod jest zgodny z doskonałym samouczkiem here. Część mojego kodu, która powoduje wewnętrzne granice, jest winowajcą i spróbowałem posortować cechy topologii, ale nie przyniosło to efektu. Oto fragment:

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

Pełną przykładem strony here

Answer 1

wierzę Twój problem wynika z tego błędu Chrome:

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

Spróbuj usunąć ustawienie stroke-dasharray f rom twój css. Mam nadzieję, że możesz żyć bez przerywanych granic.