D3 JSON paths and SVGs

问题:

After some wrestling, I have managed to put together a JSON file that can draw me a map of London and its boroughs. It's here http://graphitti.org/admin2/files/experiments/03_scaledTM5.html

Apart from the fact that the boundaries aren't perfect, the map seems OK but there's a problem in that some, but not all, of the paths apparently take up the whole SVG space. So when I inspect them in the DOM, I end up selecting the whole area. Likewise if I were to colour them in with a fill, I'd turn the whole space that colour.

I've noticed that this tends to happen with the larger boroughs, and the smaller ones are selectable through the DOM. That's not always true, but is there some limit to the number of coordinates that D3 can handle here? Or is there something else up with the code?
the JSON is here http://www.graphitti.org/admin2/files/experiments/EWNI2.json if anyone wants to inspect it. City of London is a "good" borough, as are Hackney and Tower Hamlets. Most of the others, eg Barnet, Barking, are "bad" in that they fill the SVG.

回答1:

Some of your paths are "inside-out" as far as the d3 mapping functions are concerned. The order of points in a path or sub-path has to be clockwise for it to get mapped properly.

Counter-clockwise loops are interpretted as "holes" within a larger shape, the bounds of which are assumed to be outside the map. As a result, when you colour in the shape, everything except the area within the path gets coloured.

The docs recommend running your GeoJSON file through this utility to re-order the vertices in the correct structure. Of course, you could also write your own utility to reverse the order, and just manually go through and figure out which ones are incorrect.