d3js：从同一个 CSV 调用不同的数据 - 转换

Question

好的，这是一个关于 d3js 中的转换和更新数据的非常基本的问题。 （我是 0.1 级菜鸟。）我正在为坦桑尼亚的城市人口导入 GeoJSON 和 CSV 数据。到目前为止看起来是这样的：

我现在想更新这些值，及时返回查看 2002 年、1998 年、1988 年等城市人口。这些以前的人口值是我的 CSV 中的单独列。我不知道如何称呼他们。我正在尝试的是：

   d3.select(window)
        .on("click", function() {

  svg.selectAll("circle")
        .data(data)
        .transition()
        .append("circle")
        .attr("cx", function(d) {
                return projection([d.lon, d.lat])[0];
        })
        .attr("cy", function(d) {
                return projection([d.lon, d.lat])[1];
        })
        .attr("r", function(d) {
                return Math.sqrt(parseInt(d.y2002) * 0.0004);           
        })
        .style("fill", "gold")
        .style("opacity", 0.75);

    });

完整代码为here。我的基本想法是，我需要回到一个级别，调用所有的圆圈，重新加入数据，然后重新定义所有的属性。但后者似乎效率低下。而且我很困惑：我担心 CSV 调用的异步性，我担心我处于父/子的哪个“级别”（以及如何提升“级别”？）。

我对 JavaScript 和 d3js 非常陌生，所以这是一个非常基本的问题。我已经通读了great tutorials by Scott Murray，并且原则上理解了转换/更新。但是我现在对如何应用它们感到困惑：尤其是在从同一源调用数据时（只是电子表格中的不同列！）。

Answer 1

您已经拥有数据，因此无需再次致电d3.csv。城市的位置也是一样的，所以你唯一需要更新的是半径（和工具提示）——你甚至不需要重新绑定数据。这看起来像这样。

svg.selectAll("circle")
    .transition()
    .attr("r", function(d) {
            return Math.sqrt(parseInt(d.y2003) * 0.0004);           
    });

请注意，我已在此处更改了引用的列。这是你唯一需要做的改变。