2017-02-23 106 views
2

我試圖按照Mike Bostock's process投影到topojson文件中要素的邊界框。我topojson文件已經預計到得克薩斯州繪圖系統(EPSG 3081)from the command line使用geoproject:d3.geoPath()vs d3.geo.path()

d3.geoConicConformal().parallels([34 + 55/60, 27 + 25/60]).rotate([100, -31 - 10/60]) 

然而,正是複製其代碼並修改相關位,以配合我的數據錯誤「遺漏的類型錯誤設置的結果: path.bounds是不是在這條線的功能」:

var b = path.bounds(state), 

這裏是我的完整代碼:我已經發現MANIP

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>JS Mapping Project</title> 
     <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> 
     <script src="https://d3js.org/d3-array.v1.min.js"></script> 
     <script src="https://d3js.org/d3-geo.v1.min.js"></script> 
     <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> 
     <script src="https://d3js.org/topojson.v2.min.js"></script> 
     <style type="text/css"> 
      body { 
       background-color: #eee; 
      } 
      svg { 
       background-color: #fff; 
       border: 1px solid #000; 
      } 
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      //Width and height 
      var w = 1000; 
      var h = 850; 

      var projection = d3.geoProjection(function(x, y) { 
       return [x, y]; 
      }); 

      // Create a path generator. 
      var path = d3.geo.path() 
       .projection(); 

      //Create SVG element 
      var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

      //Load in GeoJSON data 
      d3.json("data/topojson/boundary_quantize.json", function(error, json) { 
       //Add error handling 
       if (error) throw error; 

       var states = topojson.feature(json, json.objects.state), 
        state = states.features.filter(function(d) { return d.properties.NAME === "Texas"; })[0]; 

       projection 
        .scale(1) 
        .translate([0, 0]); 

       // Compute the bounds of a feature of interest, then derive scale & translate. 
       var b = path.bounds(state), 
        s = .95/Math.max((b[1][0] - b[0][0])/w, (b[1][1] - b[0][1])/h), 
        t = [(w - s * (b[1][0] + b[0][0]))/2, (h - s * (b[1][1] + b[0][1]))/2];    

       // Update the projection to use computed scale & translate. 
       projection 
        .scale(s) 
        .translate(t); 

       svg.append("path") 
        .attr("stroke"," #000") 
        .attr("stroke-width", "2") 
        .attr("d", path(topojson.mesh(json, json.objects.national))); 

       svg.append("path") 
        .attr("stroke"," #000") 
        .attr("stroke-width", "1") 
        .attr("d", path(topojson.mesh(json, json.objects.state))); 

       svg.append("path") 
        .attr("stroke"," #000") 
        .attr("stroke-width", "0.5") 
        .attr("d", path(topojson.mesh(json, json.objects.county))); 

      }); 
     </script> 
    </body> 
</html> 

有幾件事情使用代碼:

如果我通過更改var path = d3.geo.path()。projection();爲VAR路徑= d3.geo.path();,錯誤消失(因爲調用斷碼消失),但SVG平局被打破:

var path = d3.geo.path();

如果我改變路徑定義爲VAR路徑= d3.geoPath();,突然幾何繪製正確:

var path = d3.geoPath();

這是不行的(我不知道爲什麼地理路徑()的作品擺在首位),因爲那樣的話我對路徑的其他呼叫失敗。

當我輸入這個時,我意識到我忘記了對我的投影變量的調用。我改變了.projection();投影(投影);現在我的地圖看起來很奇怪,但也有不上path.bounds行錯誤像以前一樣:

.projection(projection);

這似乎是我的投影定義是錯誤的,儘管使用公式從this StackExchange answer

我將代碼從geoProjection()更改爲geoIdentity(),基於Mike Bostock's response to a comment on his Medium article。我的地圖似乎是正確的投影,縮放和居中,但全黑白配色方案沒有幫助。我加了一些快速着色各種層,現在看起來很破:

Correctly projected, scaled, and centered, but broken features.

然後我想也許這是因爲我沒有加入」功能(A,B){返回! == b;}」到topojson.mesh功能,但這樣做使事情變得更壞了:

Filtering for a!==b

我在mapshaper.org再次仔細檢查我的topojson文件,但我的幾何形狀是正確的:

Geometry check at mapshaper.org

在這一點上,我很難過。我正在實現topojson呈現數據的方式出了問題,但它與我在示例中看到的代碼相匹配。

回答

2

這裏有了突破。通過將來自topojson.mesh的功能的調用更改爲topojson.feature,問題立即解決。我不知道爲什麼。網格works in this example,但它絕對不適合我。

enter image description here

編輯:爲什麼.mesh已經在示例中使用我已經確定。它只是選擇內部邊界,因此海岸線不會被渲染,這從製圖的角度來看是一個好主意。我意識到的事情是不對這些路徑應用填充以防止我以前的繪圖錯誤。