带有 Topojson 的 D3 仅渲染地图的一部分答案

【问题标题】：D3 with Topojson only renders parts of the map带有 Topojson 的 D3 仅渲染地图的一部分
【发布时间】：2017-02-19 23:49:41
【问题描述】：

我正在尝试创建美国的等值线地图并根据一些数据对其进行着色。所以，我得到数据（只是 json 文件）：

d3.queue()
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json')
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json')
.await(ready);

然后在我准备好的函数中我这样做

function ready(error, us, education) {
  if (error) throw error;

  svg.append("g").selectAll( "path" )
  .data(topojson.feature(us, us.objects.counties).features)
  .enter()
  .append( "path" )
  .attr("class", "county")
  .attr( "fill", "red" )
  .attr( "d", path )

（我的path变量定义在文件const path = d3.geoPath();之上）

我得到了我的地图，但其中有一些漏洞，比如一些县只是不渲染。我还没有实现着色，所以它应该都是红色的，但有大的黑色碎片（也不会对mouseover 做出反应）。你可以在我的 CodePen 上看到它：http://codepen.io/enk/pen/dNBOoj

请告诉我我的错误在哪里。

【问题讨论】：

标签： javascript d3.js topojson

【解决方案1】：

您的问题在于您的网格：

   svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

你需要在你的 css 中为它指定一个无填充：

.states {
  fill:none;
}

或在附加它的代码中：

   svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr('fill','none')
      .attr("d", path);

Updated pen.

【讨论】：

非常感谢！