d3.js geo - 渲染 svg 路径答案

【问题标题】：d3.js geo - rendering svg pathd3.js geo - 渲染 svg 路径
【发布时间】：2014-09-22 10:59:18
【问题描述】：

我想创建捷克共和国的等值线地图。受这篇文章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

【问题讨论】：

标签： svg d3.js geojson

【解决方案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()}

但这不会解决问题多边形，也不会不会反转它的坐标。

【讨论】：

感谢 .reverse() - 非常有用！
完美！我使用了捷克统计局的 KML 文件，并通过 QGIS（后来通过mapbox.github.io/togeojson）将其转换为 GeoJSON。现在它的工作。非常感谢。

【解决方案2】：

如果您熟悉 svg 操作，可以尝试geojson2svg。这允许您以标准方式操作 svg，但您必须编写更多代码。如果您的应用程序需要 d3 用于许多其他目的，那么 d3 是最佳解决方案。

【讨论】：

【解决方案3】：

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

.reverse()-ing 不够好，如果您不能确保所有数据都具有相同的缠绕顺序。

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

您需要有npm 和require 可用
安装它，并将其保存到您的项目中

npm i -g geojson-rewind
导入它，使其可用

var rewind = require('geojson-rewind');
在数据上使用它，在这种情况下：

req = rewind(req);

提示：如果您使用的是静态数据，则只能在控制台上执行一次，一切顺利。

【讨论】：