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中为其指定填充：

.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只渲染地图的一部分

1 个答案: