带有 Topojson 的 D3 只渲染部分地图

Question

我正在尝试创建美国的等值线图并根据一些数据为其着色。所以，我得到数据（只有 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

请告诉我我错在哪里。

Answer 1

您的问题出在您的网格中：

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

您需要在 css 中为其指定填充 none:

.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.

带有 Topojson 的 D3 只渲染部分地图

D3 with Topojson only renders parts of the map

javascript

d3.js

topojson