javascript - 带有 Topojson 的 D3 只渲染部分 map

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(); 之上)

我得到了我的 map ，但其中有一些漏洞，就像有些县没有渲染一样。我还没有实现着色，所以它应该都是红色的，但有大的黑色碎片(也不会对 mouseover 使用react)。你可以在我的 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 中为其指定一个填充:

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