使用d3渲染geoJSON

Question

我有一個geoJSON文件，我正在嘗試使用d3渲染，但我很難針對投影的正確功能。

目前我已經在許多d3示例中找到的us.json文件中工作了很多，但我正在使用的地圖使用美國“通勤區域”（CZ's）而不是土地，州或縣。

我習慣打電話

topojson.feature(us, us.objects.states)

顯示正確的圖層，但我的文件沒有組織成對象，也沒有多個圖層。 以下是我試圖使用的geoJSON文件的摘錄：

{"type":"FeatureCollection","bbox":[-120.30602148510043,6.667736880597216,-70.95829310710806,34.46308750538215],"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-83.802805983004,22.64602264051764],[-83.8080569412408,22.638128812605782],

這是我在渲染時失敗的代碼：

d3.json("CZ90.zip.geojson", function(error, us) {
    if (error) throw error;

    d3.select("svg").append("path")
        .datum(topojson.feature(us, us.CZ90))
        .attr("d", d3.geo.path());
});

由於沒有對象，我省略了“.object”，當我將文件放入Mapshaper時，它正確地渲染了一個標題為“CZ90”的圖層，這就是我寫“us.CZ90”而不是“us.objects”的方法。。狀態”

我意識到我正在調用“topojson.feature”而不是特定於geoJSON的東西，但我也無法在不丟失投影類型/信息的情況下將文件成功轉換為Mapshaper中的topoJSON。

在.datum調用中定位此圖層的正確方法是什么？

如果我能找到包含通勤區域層的us.json這樣的topoJSON文件，那么整個問題也將得到解決！

Answer 1

結束了我的開發者朋友的幫助，答案比我的問題簡單得多。

好像d3.json()本身適合讀取我的geoJSON文件的結構而不使用datum()所需要的只是調用：

d3.json("CZ90.zip.geojson", function(error, geoData) {
    d3.select("svg").append("path")
        .attr("d", path(geoData));
}

注意：這是使用d3.v4

以下是能夠成功渲染地圖的完整腳本：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-linejoin: round;
    }
</style>

<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>

<script>

var width = 960;
var height = 620;

var chosenProjection = d3.geoMercator()
  .scale(600)
  .translate([1300, 450])

  var path = d3.geoPath()
    .projection(chosenProjection);

d3.json("CZ90.zip.geojson", function(error, geoData) {

  d3.select("svg").append("path")
      .attr("d", path(geoData));
});

</script>

希望這有助於其他人堅持這么簡單的障礙！

Answer 2

我可能在這里遺漏了一些東西，但是如果你看一下topojson文檔，你會注意到topojson.feature：

返回給定拓撲中指定對象的GeoJSON Feature或FeatureCollection。 如果指定的對象是GeometryCollection，則返回FeatureCollection，並且集合中的每個幾何都映射到Feature。 否則，返回一個功能。

在d3文檔中，您將注意到d3 geopath：

呈現給定對象，可以是任何GeoJSON功能

所以關於：

我意識到我正在調用“topojson.feature”而不是特定於geoJSON的東西

您已經使用了geoJSON特定的東西，您只能使用topojson.js將topoJSON轉換回geoJSON，以便可以在D3地圖中使用它。 所以回答你的問題：

在.datum調用中定位此圖層的正確方法是什么？

正確的方法是簡單地使用：

.datum(us) // feature collection or single feature

這將附加單個路徑，但是如果要附加具有相同數據集的多個路徑（例如，用於不同的着色或鼠標交互）：

.data(us.features) // feature collection

使用d3渲染geoJSON

問題描述

2 個解決方案

解決方案1
1 已采納 2017-07-18 00:28:15

解決方案2
0 2017-03-22 02:37:59

使用d3渲染geoJSON

問題描述

2 個解決方案

解決方案1 1 已采納 2017-07-18 00:28:15

解決方案2 0 2017-03-22 02:37:59

解決方案1
1 已采納 2017-07-18 00:28:15

解決方案2
0 2017-03-22 02:37:59