Question

我在d3 book中绘制了等值区域地图，我不明白绘制元素的顺序。

正确的代码如下：

d3.csv("us-productivity.csv", function(data) {

  d3.json("us-states.json", function(json) {
    // Merge producivity data and geojson data
    // Then plot the paths, using the level of productivity for "fill"
  });

  d3.csv("us-cities-size.csv", function(data) {
    // Plot cities as dots of different sizes
  })
});

然而，当我在d3.csv("us-cities-size.csv")之外和之后移动d3.csv("us-productivity.csv")时，城市点位于等值区域下方。为什么在us-cities-size的代码出现并且应该在顶部绘制的情况下呢？

Answer 1

这可能是一个时间问题。 d3.csv函数发出一个异步运行的AJAX请求。您传递的函数在收到响应时运行，但d3.csv调用下面的代码将在等待服务器响应时运行。通过将d3.csv("us-cities-size.csv")调用移出回调，两个调用将同时运行。这变成了一场竞赛，看看哪个调用将首先返回并执行回调。由于d3.csv("us-productivity.csv")调用会在内部进行另一个d3.csv调用，因此几乎可以保证us-cities-size将首先返回，这意味着它将首先绘制。

实际上，比依赖文档顺序的这些回调更好的方法是在进行csv调用之前为每个层附加一个组。然后，您可以添加到组中，并保证分层顺序。像这样：

var statesGroup = svg.append("g");
var citiesGroup = svg.append("g");    
d3.csv("us-productivity.csv", function(data) {

  d3.json("us-states.json", function(json) {
    // Merge producivity data and geojson data
    // Then plot the paths, using the level of productivity for "fill"
    // Append everything to statesGroup
  });

  d3.csv("us-cities-size.csv", function(data) {
    // Plot cities as dots of different sizes
    // Append everything to citiesGroup
  })
});

d3 - 尽管最后绘制的元素被遮挡了

1 个答案: