Question

我尝试使用Google Maps API添加GeoJSON数据定义的某些路径的叠加层。我开始使用this thread中的示例，它可以很好地处理我的数据 - 直到我尝试使用两个不同的路径。路径需要使用不同的颜色进行渲染，因此我无法组合数据集。

我遇到了一个问题，并非所有路径都会完全渲染。以下是我尝试做的事情的要点：

path2 = d3.geo.path().projection(googleMapProjection);
path4 = d3.geo.path().projection(googleMapProjection);

svg.selectAll("path")
  .data(line2_geoJson.features)
  .attr("d", path2) // update existing paths
  .attr("stroke", "red")
  .enter().append("svg:path");
svg.selectAll("path")
  .data(line4_geoJson.features)
  .attr("d", path4) // update existing paths
  .attr("stroke", "green")
  .enter().append("svg:path");

显示一些例子：

http://jsfiddle.net/HWxKu/ - 请注意红色路径呈现，但绿色路径从不显示。（放大一点。）

http://jsfiddle.net/X644x/ - 唯一不同的是我切换了两个svg.selectAll语句的顺序。绿色路径主要呈现，并且在放大一点之后呈现红色路径的位。

任何人都可以解释可能发生的事情吗？我的想法是Google Maps API对叠加层施加了某种限制（可能是超时？），或者是异步发生在这里？我是d3的新手，所以非常感谢任何解释。

Answer 1

您使用的enter()选项错误。设置“d”和“stroke”的第一组语句根本没有任何作用，因为还没有路径。您需要在添加新元素后添加这些元素。

第二个问题是，使用第二个语句，您将覆盖第一个路径。默认情况下，D3通过数组索引匹配现有数据的新内容。也就是说，第一个新功能与第一个现有路径匹配，依此类推。你需要提供一个函数来告诉D3如何匹配。

我认为您想要的代码看起来像这样。

svg.selectAll("path")
   .data(line2_geoJson.features, function(d) { return d.properties.route_id; })
   .enter().append("path")
   .attr("d", path2)
   .attr("stroke", "red");

svg.selectAll("path")
   .data(line4_geoJson.features, function(d) { return d.properties.route_id; })
   .enter().append("path")
   .attr("d", path4)
   .attr("stroke", "green");

使用d3.js和google maps API的多个路径

1 个答案: