d3.js地理图形——呈现SVG路径

Question

我想创建捷克共和国的区域密度图。受到这篇文章 http://bl.ocks.org/mbostock/4060606 的启发，我创建了这个
http://jsfiddle.net/1duds8tz/2/。

var width = 960;
var height = 500;

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var offset = [width / 2, height / 2];

var projection = d3.geo.mercator().scale(6000).center([15.474, 49.822]).translate(offset);
var path = d3.geo.path().projection(projection);

queue().defer(d3.json, "..map.geojson").await(ready);

function ready(error, reg) {
    var group = svg.selectAll("g").data(reg.features).enter().append("g");
    group.append("path").attr("d", path).attr("fill", "none").attr("stroke", "#222");
}

当我尝试给SVG路径填充颜色时，遇到了这个问题。
http://jsfiddle.net/1duds8tz/3/

        group.append("path").attr("d", path).attr("fill", "red").attr("stroke", "#222");

路径 d 属性中存在奇异值。我的 GeoJSON 数据可能有问题，但我无法确定哪里出错了。

这里的一切看起来都没问题：https://gist.github.com/anonymous/4e51227dd83be8c2311d

- pvydrysek

Answer 1

你的geoJSON有问题了，结果多边形被绘制成无限边界多边形的内部。这就是为什么当你尝试给路径填充颜色时，它超出了屏幕范围但仍然正常显示边框的原因。我尝试反转了你坐标数组的顺序，所有都看起来好了，除了“Brno-venkov”，这可能是你问题的来源（特别是考虑到它的行政形状）。

我建议回到创建原始GeoJSON的位置，尝试使用简化重新导出它。如果你想要通过反转GeoJSON的坐标来纠正缠绕顺序，那很简单：

 geodata = d3.selectAll("path").data();
 for (x in geodata) {geodata[x].geometry.coordinates[0] = geodata[x].geometry.coordinates[0].reverse()}

但这样做并不能解决多边形问题，也不能不反转其坐标。

- Elijah

---

谢谢你使用 .reverse() - 非常有用！ - angus l

太好了！我使用了捷克统计局的KML文件，并通过QGIS（后来通过http://mapbox.github.io/togeojson/）将其转换为GeoJSON。现在它正常工作了。非常感谢你。 - pvydrysek

Answer 2

如果您熟悉SVG操作，可以尝试使用geojson2svg。这允许您以标准方式操作SVG，但需要编写更多的代码。如果您的应用程序需要D3来完成其他许多任务，则D3是最佳解决方案。

- Gagan

Answer 3

我遇到了与Mapzen的.geojson文件完全相同的问题。

如果您无法确保所有数据具有相同的绕组顺序，则.reverse（）不够好。

我用这个解决了它： https://www.npmjs.com/package/geojson-rewind

1. 您需要安装npm和require

2. 安装它，并将其保存到您的项目中

   npm i -g geojson-rewind

3. 导入它，使其可用

   var rewind = require('geojson-rewind');

4. 在此数据上使用它：

   req = rewind(req);

提示：如果您正在使用静态数据，则只需在控制台上执行此操作一次即可。

- paragonhex