在d3.js中繪製已投影的geoJSON地圖

Question

對於d3.js的v3，我在使用geoJSON數據繪製地圖時遇到問題。代碼和結果地圖顯示在：http://bl.ocks.org/73833ec90a8a77b0e29f。使用d3.js的這個例子生成一個正確的地圖。

1. 我的數據已經被預測（他們是荷蘭國家網格/ Rijksdriehoekstelsel座標）。爲了彌補這一點，我編寫了自己的投影函數，它將地圖的座標系轉換爲像素（例如縮放和平移）。
2. d3.js的v3中的d3.geo.path（）重新採樣數據。但是，重採樣中生成的點似乎與我的地圖不在同一座標系中（我假設它們是lon，lat座標）。

我寧願不將地圖的座標轉換爲lon，lat座標，因爲地圖已經按照我想要的方式投影了，並且據我所知，這不是一個微不足道的投影。

如果問題確實是由重採樣引起的，我想禁用重採樣。但是，在文檔中，我無法真正找到如何做到這一點。我可以傳遞一個流對象，而不是將投影函數傳遞給d3.geo.path.projection（）。我認爲以下將工作：

var projection = d3.geo.projection(function(x, y) { 
    return [ scale*(x-xmin), height-scale*(y-ymin) ]; 
    }).precision(0); 

但它沒有。也許還與我沒有經緯度座標的事實有關。我如何禁用使用自定義投影功能的重採樣？

或者當別的東西導致問題時，我想聽聽那個。

謝謝。

Answer 1

針對user603124答案我有另一個看問題（到現在爲止我貼與v3的d3.js）。我最初的想法是創建一個對象。但是，在我原來的實現中，我的縮放和縮放是錯誤的。使用answer to another question獲得縮放和放大右：

<script> 
    var height = 400; 
    var width = 400; 

    var vis = d3.select("#vis").append("svg") 
     .attr("width", width).attr("height", height) 

    d3.json("po_2012_simplified.json", function(json) { 

     var projection = d3.geo.projection(function(x, y) { return [x, y];}) 
     .precision(0).scale(1).translate([0, 0]); 

     var path = d3.geo.path().projection(projection); 

     var bounds = path.bounds(json), 
      scale = .95/Math.max((bounds[1][0] - bounds[0][0])/width, 
        (bounds[1][1] - bounds[0][1])/height), 
      transl = [(width - scale * (bounds[1][0] + bounds[0][0]))/2, 
        (height - scale * (bounds[1][1] + bounds[0][1]))/2]; 

     projection.scale(scale).translate(transl); 

     vis.selectAll("path").data(json.features).enter().append("path") 
     .attr("d", path) 
     .style("fill", "#D0D0D0") 
     .style("stroke-width", "0.5px") 
     .style("stroke", "black") 
    }); 

</script> 

一個完整的工作解決方案見http://bl.ocks.org/djvanderlaan/5336035。

Answer 2

最近我遇到了同樣的問題。

要做到這一點的方法是明確告訴D3你不想投影。 答案在link。

"If projection is null, the path uses the identity transformation, where the input 
geometry is not projected and is instead rendered directly in raw coordinates. This can be 
useful for fast rendering of already-projected geometry, or for fast rendering of the 
equirectangular projection." 

所以，你想擁有

var path = d3.geo.path().projection(null); 

然後，像這樣

g.selectAll("path") 
      .data(json.features) 
      .enter().append("path") 
      .attr("d", path)