Question

我使用D3创建了一张世界地图。我正在使用D3库和topojson库进行创建。

现在，我想在“肯尼亚”中绘制一个名为“图尔卡纳”的县的路径。为此，我将从“图尔卡纳”县的geoJSON数据中检索到的新路径附加到现有的WorldMap路径。如下所示

g.selectAll("path")
  .data(countries)
  .enter().append("path")
  .attr("d", path)
  .attr("class", "feature")
  .on("click", clicked);

g.selectAll("path")
  .data(geoJSONKenyaTurkana.features)
  .enter().append("path")
  .attr("d",path)
  .attr("class", "feature");

但似乎没有发生任何事情。我的意思是图尔卡纳县的路径没有画出来。任何帮助将不胜感激。

我为当前的工作代码创建了plunker。

Answer 1

您的问题是您没有正确使用enter方法。添加国家/地区时，您可以使用选择：

g.selectAll("path")

由于还没有路径，这是一个空选择。通常，当您将数据分配给选择并使用enter()选项时，输入选择包含需要创建的所有功能。在这种情况下，因为初始选择中没有任何功能;因此，使用.enter().append()将为数据数组中的每个项创建一个功能。这在追加国家时第一次很有用。

第二次使用相同的选择（当尝试添加县时），但这次选择不为空 - 您选择了刚刚创建的所有路径（每个国家一个）。输入选择将为空，不需要进行任何新功能，您只是更新已创建的第一个路径的数据。

如果您在代码中注释两行，则可以看到这一点：

g.selectAll("path")
    .data(geoJSONKenyaTurkana.features)
    //.enter().append("path")
    .attr("d",path)
    //.attr("class", "feature");

在这个example using your map中显示，您可以看到县数据刚刚替换了加拿大的数据（您无法看到加拿大（现为图尔卡纳）的新数据，因为它是在肯尼亚之后，因为它已被追加到之前肯尼亚最初的补充）。

要使您的方法工作，您需要使用空选择，您可以使用d3.selectAll(null)或d3.selectAll(".ClassDoesNotExistYet")（后一个选项稍慢）等。如果选择为空，则所有项目都在需要追加的数据数组将在输入选择中。按预期的方式查看代码的plunker（我删除了网格，因为它降低了该演示版县的可见性）。

在D3中添加新路径到现有地图

1 个答案: