D3 JSON路径和SVG [英] D3 JSON paths and SVGs

问题描述

在一些摔跤之后，我设法组装了一个JSON文件，可以绘制一幅伦敦及其行政区的地图。这里是 http://graphitti.org/admin2/files/experiments/03_scaledTM5.html

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

除了边界不完美的事实，地图似乎确定，但有一个问题，一些，但不是所有的路径显然采取整个SVG空间。所以当我在DOM中检查他们时，我最终选择了整个区域。同样，如果我用一个填充颜色他们，我会把整个空间的颜色。

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.

我注意到这种情况发生在较大的区域，较小的区域可以通过DOM选择。这不总是真的，但是D3可以处理的坐标数量有一些限制吗？或者还有其他代码吗？

JSON在这里 http://www.graphitti.org/admin2/files/experiments/EWNI2.json 如果有人想检查它。伦敦市是一个好的行政区，哈克尼和塔小村庄。大多数其他人，例如Barnet，Barking，是坏，因为他们填充SVG。

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.

推荐答案

对于d3映射函数，一些路径是内向外的。 路径或子路径中的点的顺序必须为顺时针，以便正确映射。

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.

文档建议您运行GeoJSON文件通过此实用程序重新排序正确结构中的顶点。当然，你也可以编写自己的实用程序来颠倒顺序，只需手动通过并找出哪些不正确。

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.

这篇关于D3 JSON路径和SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！