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路徑

回答

相關問題