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

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