d3.js地理 - 渲染svg路径

我想创建捷克共和国的世界地图。本文http://bl.ocks.org/mbostock/4060606的启发，我创造了这个
http://jsfiddle.net/1duds8tz/2/d3.js地理 - 渲染svg路径

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

来源

2014-09-22 LutraLutra

你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()}

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

来源

2014-09-22 22:25:40 Elijah

谢谢.reverse（） - 非常有用！ – 2014-09-23 04:30:30

完美！我使用捷克统计办公室的KML文件，并通过QGIS（后来由http://mapbox.github.io/togeojson/）将其转换为GeoJSON。现在它的工作。非常感谢你。 – LutraLutra 2014-09-23 05:36:54

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

来源

2014-10-04 05:33:42 Gagan

我和Mapzen的.geojson文件有完全一样的问题。

.reverse（） - 如果不能确保所有数据具有相同的缠绕顺序，则不够好。

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

你需要有npm & require可用
安装它，并把它保存到您的项目

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

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

req = rewind(req);

提示：如果您正在使用静电工作数据，你只能在控制台上做到这一点，而且你很好。

来源

2016-04-15 15:11:47 paragonhex

d3.js地理 - 渲染svg路径

回答

相关问题