1

我正在尝试使用 Google Maps API 添加由 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");

举一些例子：

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

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

谁能解释可能发生的事情？我的想法是，要么 Google Maps API 对覆盖施加了某种限制（可能是超时？），还是这里发生了异步事件？我是 d3 的新手，因此非常感谢任何解释。

4

1 回答 1

2

您使用的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");
于 2013-06-20T14:03:26.087 回答