使用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);
    })
});

如果你也想要状态轮廓 - 除了区域之外只绘制状态。 这里是使用上述方法的西海岸 ，绘制其他区域，只需将它们添加到区域数组（同时还向查找对象添加必要的状态代码）。