javascript - d3.js - 更新 GeoJSON 元素

Question

我正在制作一张 map ，其中我首先使用 GeoJSON 文件定义的路径定义州轮廓，以及一些额外信息，例如州名称。加载后，我想根据来自 csv 的数据填充状态并填充工具提示，使用一些按钮和复选框(年份，不同的数据子集)。

我发现当我第二次调用状态对象的 .data() 时，使用 csv 而不是 json 文件，路径消失了，因为它们只存在于 json 中。有没有办法只能更新某些变量？有没有更好的方法将状态对象绑定(bind)到动态数据？

Answer 1

我通常采用的方法以及代码在 choropleth map example 中设置的方式，就是分别加载两个文件，需要的时候再join feature id上的数据。如果按顺序加载文件，这是最简单的，如下所示:

// make a container
var counties = svg.append("svg:g")
    .attr("id", "counties");

// load the data you're showing
d3.json("unemployment.json", function(data) {
  // load the geo data (you could reverse the order here)
  d3.json("us-counties.json", function(json) {
    // make the map
    counties.selectAll("path")
        .data(json.features)
      .enter().append("svg:path")
        .attr("d", path);
    // now join the data, maybe in a separate function
    update(data)
  });
});

在您的 update() 函数中，您获取数据并根据 id 将操作(颜色等)应用于 map :

update(data) {
    // look at the loaded counties
    counties.selectAll("path")
      // update colors based on data
      .attr('fill', function(d) {
        // get the id from the joined GeoJSON
        var countyId = d.id;
        // get the data point. This assumes your data is an object; if your data is
        // a CSV, you'll need to convert it to an object keyed to the id
        var datum = data[countyId];
        // now calculate your color
        return myColorScale(datum);
      });
}