D3.js 使用D3和角度6绘制美国地图区域

我需要在D3中按地区绘制美国地图。应该是类似的。

我从地图上获取参考，地图显示数据状态。我可以用D3和6来创建这个状态图。但是

• 如何为区域数据获取geojson或topojson

• 我也没有发现任何使用D3的图表

• 哪一个对geoJson或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);
});

它看起来有点像这个。到目前为止，没有几个州失踪。（这不是问题，）

---

Topojson在传递到d3.geoPath时转换为geojson-您可以使用其中一种。然而，由于topojson API公开了一个方法，topojson有一个关键的优势：我们可以在示例中使用topojson

us.json

文件来绘制地图

要将状态集合绘制为一个特性，我们只需要将它们合并为一个特性。为此，我们使用：

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

我们测试每个州，看它是否属于当前地区。此行将返回包含合并的topojson功能的geojson功能。然后我们可以将其传递到

d3.geoPath

使用示例中链接到的<代码> U.JSON/COD>文件，我们需要考虑数据中的状态如何（以及是否）。< /P>

us.json

文件没有附带对其元数据的描述，但我可以说每个状态的id都是一个数字代码。因此，除非我们想以数字形式指定区域，否则我们需要在数字和缩写（或其他可识别的形式）之间进行转换。我将使用一个简单的对象从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);
    })
});

---

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

我可以使用您提到的方法创建区域图表。我也想创建州轮廓，但对此没有任何想法，我在问题中也添加了我的方法。我如何在区域内显示文本，我能够显示文本，但所有区域文本仅位于一个位置。对于第一个注释，您可以绘制区域（仅填充）、州或州网格（笔划一），然后再次绘制区域，仅使用笔划。这应该安排好一切。可以使用路径质心定位文本（请参见d3 geo docs），但应该在某个地方找到答案，试试这个