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

我正在尝试使用GoogleMapsAPI添加GeoJSON数据定义的一些路径的覆盖。我从中的示例开始使用，它可以很好地处理我的数据——直到我尝试使用两种不同的路径。路径需要用不同的颜色渲染，因此我无法组合数据集

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

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");

要显示一些示例：

--请注意，红色路径渲染，但绿色路径从未显示。（放大一点。）

--唯一不同的是，我切换了两个svg.selectAll语句的顺序。主要渲染绿色路径，放大一点后渲染红色路径的部分

---

有人能解释一下可能发生的事情吗？我的想法是，要么谷歌地图API对覆盖施加了某种限制（可能是超时？），要么这里发生了异步情况？我是d3的新手，因此非常感谢您的解释。

您使用的

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");

---

谢谢你的回复。但是，当我尝试这种方法时，仍然会遇到问题——路径不会完全渲染，而且当Google Maps中的缩放级别更改时，路径也不会覆盖。尝试一下，在放大一点后，地图上会充满不正确放置的路径。这看起来像是谷歌地图的问题。作为快速修复，添加

svg.selectAll（“path”）.remove（）很难看，但很有效。对于其他人来说，这可能也是一个有用的工具。