javascript - d3.js 和谷歌地图 API 的多条路径

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