D3 JSON 路径和 SVG答案

【问题标题】：D3 JSON paths and SVGsD3 JSON 路径和 SVG
【发布时间】：2014-03-14 05:11:05
【问题描述】：

经过一番折腾，我设法整理了一个 JSON 文件，可以为我绘制一张伦敦及其行政区的地图。在这里http://graphitti.org/admin2/files/experiments/03_scaledTM5.html

除了边界不完美之外，地图看起来还不错，但问题在于，一些（但不是全部）路径显然占据了整个 SVG 空间。所以当我在 DOM 中检查它们时，我最终选择了整个区域。同样，如果我用填充给它们上色，我会把整个空间变成那种颜色。

我注意到这往往发生在较大的行政区中，而较小的行政区可以通过 DOM 进行选择。这并不总是正确的，但是 D3 可以在这里处理的坐标数量是否有一些限制？还是代码有其他问题？
如果有人想检查它，JSON 在这里http://www.graphitti.org/admin2/files/experiments/EWNI2.json。伦敦金融城是一个“好”的自治市镇，哈克尼和塔哈姆雷特也是。其他大多数，例如 Barnet、Barking，都是“坏的”，因为它们填充了 SVG。

【问题讨论】：

标签： json d3.js path maps

【解决方案1】：

就 d3 映射函数而言，您的某些路径是“由内而外”的。 The order of points in a path or sub-path has to be clockwise 以便正确映射。

逆时针循环被解释为较大形状内的“洞”，其边界被假定在地图之外。因此，当您为形状着色时，除了路径内的区域之外的所有内容都会被着色。

文档建议通过this utility 运行您的 GeoJSON 文件，以便以正确的结构重新排序顶点。当然，您也可以编写自己的实用程序来反转顺序，然后手动查看并找出错误的顺序。

【讨论】：

太好了，谢谢。相当可耻的是，我不明白我应该用你链接到的那个实用程序做什么 - 是 gdal 的事情吗？当我试图掌握这些东西时，我已经超出了我的深度，这不是真的
抱歉，我没有仔细看就复制了链接。看起来它不是一个独立的实用程序，而是 PostGIS 中的一个功能。也许尝试转换为TopoJSON 并返回？（需要 node.js）。或者只是找出哪些形状是由内而外的，然后用相同的数组.reverse()'d 替换它们的坐标数组。然后将您的 JSON 字符串化，将其写入屏幕，复制、粘贴和保存。如果您不是地图软件专家（我当然不是），那么对于像这样的小型数据集，这可能是最简单的。
酷，非常感谢。我真的迫不及待地想整理这些地图，然后我可以重复使用它们。 GIS 真的是一个完整的“另一个世界……”
好吧，我似乎终于得到了测试和反转坐标字符串工作的脚本。但它正在逆转一切——包括在你的地图上没有奇怪显示的形状。试一试：fiddle.jshell.net/9GpQG/5 它应该适用于任何数据集，其中每个要素都是单个多边形，没有孔或岛。