使用 D3 和 angular 6 明智地绘制美国地图区域

Question

我需要在 D3 中明智地绘制美国地图区域。应该是类似这个的东西。

我参考了 this USA 地图，它显示了数据状态。而且我能够使用 D3 和 angular 6 创建这个状态明智的图表。但是

如何获取 Region wise 数据的 geojson 或 topojson。
我也没有发现任何图表在该地区使用 D3。
geoJson和topojson哪个有用。（根据我的理解和 this article 它将是 topojson。）
我没有得到任何方法来绘制这个，

编辑： 我可以使用 andrew 提到的方法创建区域图表。 我也想创建状态轮廓，但对此一无所知。以下是我使用的方法。

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

Topojson 在传递给 d3.geoPath 时会转换为 geojson - 您可以使用其中任何一个。但是，由于 topojson API 公开了一个 merge 方法，因此 topojson 有一个关键优势：我们可以在您的示例中使用 topojson us.json 文件来绘制您的地图。

要将一组状态绘制为一个特征，我们只需要将它们合并为一个特征即可。为此，我们使用：

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

我们在这里测试每个州，看看它是否属于手头的地区。此行将 return 包含合并的 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);
    })
});

如果您也想要州轮廓 - 除了区域之外，只需绘制州。 Here's the west coast使用上面的方法，要绘制额外的区域，只需将它们添加到区域数组中（同时还要将必要的状态代码添加到查找对象中）。

使用 D3 和 angular 6 明智地绘制美国地图区域

Draw USA map region wise using D3 and angular 6

d3.js

charts

angular6

geojson

topojson