使用D3和角度6繪制美國地圖區域

Question

我需要在D3中明智地繪制美國地圖區域。 它應該與此類似。

我正在參考這張顯示數據狀態的美國地圖。 我能夠使用D3和角度6創建這個狀態明智的圖表。但是

• 如何獲取geojson或topojson用於區域智能數據。

• 我也沒有找到任何使用D3的圖表。

• 哪一個將有用geoJson或topojson。 （根據我的理解和本文 ，它將是topojson。）

• 我沒有得到任何方法來吸引這個，

編輯：我能夠使用安德魯提到的方法創建區域圖表。 我也想創建狀態輪廓 ，但沒有想到這一點。 以下是我使用的方法。

const svg = d3
  .select('#statesvg')
  .attr('viewBox', '0 0 960 600')
  .attr('width', this.width)
  .attr('height', this.height);
this.getUSData().subscribe(us => {
  svg
    .selectAll(undefined)
    .data(this.uRegionPaths)
    .enter()
    .append('path')
    .attr('d', datum => {
      const feature = topojson.merge(
        us,
        us.objects.states.geometries.filter(state => {
          return datum.contains.indexOf(this.lookup[state.id]) > -1;
        })
      );

      return path(feature);
    })
    .attr('fill', d => {
      return this.sampleRegionData[d.name].color;
    })
    .attr('stroke', 'white')
    .attr('stroke-width', 3);
});

它看起來有點類似於此。 到目前為止，很少有州失蹤。（這不是問題）

Answer 1

當傳遞給d3.geoPath時，Topojson被轉換為geojson - 您可以使用其中任何一個。 但是，由於topojson API公開了一個合並方法，topojson有一個關鍵優勢：我們可以使用示例中的topojson us.json文件來繪制地圖。

要將狀態集合繪制為一個特征，我們只需將它們合並為一個特征。 為此，我們使用：

topojson.merge(us, us.objects.states.geometries.filter( /* some test */ )

我們在哪里測試每個州，看它是否屬於手頭的區域。 該行將返回包含合並的topojson特征的geojson特征。 然后我們可以將它傳遞給d3.geoPath 。

要使用鏈接到示例中的us.json文件，我們需要考慮如何（以及如果）在數據中標識狀態。

us.json文件沒有隨附的元數據描述，但我可以說每個狀態的id是一個數字FIPS代碼。 因此，除非我們想要在數字上指定區域，否則我們需要在數字和縮寫（或其他一些可識別的形式）之間進行轉換。 我只是使用一個簡單的對象來獲取FIPS編號的縮寫：

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

現在我們可以指定區域，例如：

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

現在我們可以繪制我們的區域：

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

d3.json("us.json").then(function(us) {
  svg.selectAll(null)
    .data(regions)
    .enter()
    .append("path")
    .attr("d", function(region) {
      var feature = topojson.merge(us, us.objects.states.geometries.filter(function(state) { 
         return region.contains.indexOf(lookup[state.id]) > -1; 
       }))
       return path(feature);
    })
});

如果你也想要狀態輪廓 - 除了區域之外只繪制狀態。 這里是使用上述方法的西海岸 ，繪制其他區域，只需將它們添加到區域數組（同時還向查找對象添加必要的狀態代碼）。