如何使用D3獲取來自GeoJSON數據集的投影路徑定義字符串（不是SVG元素）？

有很多使用D3路徑投影工具從D3地理數據中繪製SVG路徑的示例。例如，here's one I wrote earlier (D3 v3)，這裏是一個recent example using D3 v4。如何使用D3獲取來自GeoJSON數據集的投影路徑定義字符串（不是SVG元素）？

他們都看起來像這樣：

svg.append("path") 
     .data(topojson.feature(datafile, datafile.objects.featureOfInterest)) 
     .attr("class", "land") 
     .attr("d", pathDefinitionObject);

...其中數據文件被讀出，並與一些SVG關聯，創建鏈接的空路徑，然後用一定的投影長相關聯的D3路徑定義對象數據並使用它將SVG路徑定義字符串添加到這些路徑的d屬性中。

我想要的是，那些路徑定義字符串，但作爲字符串，而不觸及任何SVG。我想和Raphael一起使用這些字符串，以便我可以在不支持SVG的瀏覽器上繪製路徑，因爲某個特定項目需要支持機構客戶，因爲遺留軟件要求和公司策略尚未從IE8升級（我知道，我知道...）。

D3顯然能夠定義這些字符串，但我看不到明顯的方式讓路徑定義對象輸出字符串而不鏈接到DOM SVG元素。

如何獲得字符串，頁面上沒有任何SVG？

我試圖使用一組D3 v4's "microlibraries"這個最小的，所以獎勵積分以最少D3依賴（答案尤其是如果它能夠避免D3-selection.js這是相當大的 - 我的理想'只想使用D3的數據處理，並且完全不使用它的DOM操作來完成這個項目）。

來源

2016-07-27 user568458

建立了你的鏈接v4例如極簡代碼只拿到土地路徑d屬性是：

<!DOCTYPE html> 
<meta charset="utf-8"> 

<script src="//d3js.org/d3-array.v1.min.js"></script> 
<script src="//d3js.org/d3-geo.v1.min.js"></script> 
<script src="//d3js.org/d3-request.v1.min.js"></script> 
<script src="//d3js.org/d3-dispatch.v1.min.js"></script> 
<script src="//d3js.org/d3-collection.v1.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 

<script> 

var projection = d3.geoAlbers() 
    .scale(1280) 
    .translate([500, 500]); 

var path = d3.geoPath() 
    .projection(projection) 
    .pointRadius(1.5); 

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us){ 
    if (error) throw error; 

    var topo = topojson.feature(us, us.objects.land); 
    console.log(path(topo)); 

}); 

</script>

如果你不使用d3.json，你可以刪除d3-request，d3-dispatch和d3-collection庫。

來源

2016-07-27 13:31:31 Mark

太棒了！不能相信我所要做的就是將geojson對象傳遞給路徑對象！這會將featureCollection中每個要素的一個兆字符串組合成一個「M ... ZM ... ZM ... Z」複合字符串，但只需在'topo.features'周圍運行'for'循環就很容易了。把它們分開 – user568458

如何使用D3獲取來自GeoJSON數據集的投影路徑定義字符串（不是SVG元素）？

回答

相關問題