Javascript 如何在d3.js中更新气泡图？

我成功地创建了一个气泡图，当它是一个单一的数据集时，效果很好。但是如果我需要用其他数据集更新它，就会出现问题。请在帮助我更新功能

---

当您需要捕获

svg:g

group元素上的enter选择以正确应用enter/update/exit模式时，这是典型的情况。但是，为了保持标签仍然指向正确的元素，您还需要根据一些感兴趣的数据属性（

d.className

，它是从

d.name

生成的）为数据设置关键帧

以下是修改后的气泡更新功能的主要部分：

var node = svg.selectAll(".node")
    .data(
        bubble.nodes(classes(root)).filter(function (d){return !d.children;}),
        function(d) {return d.className} // key data based on className to keep object constancy
    );

// capture the enter selection
var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

// re-use enter selection for circles
nodeEnter
    .append("circle")
    .attr("r", function (d) {return d.r;})
    .style("fill", function (d, i) {return color(i);})

// re-use enter selection for titles
nodeEnter
    .append("title")
    .text(function (d) {
        return d.className + ": " + format(d.value);
    });

完整的在这里

---

如果您感兴趣的话，我还讨论了将enter/update/exit模式应用于

svg:g

元素的问题。

哦，这是Andes。。这就是我需要的，谢谢你的工作。

var node = svg.selectAll(".node")
    .data(
        bubble.nodes(classes(root)).filter(function (d){return !d.children;}),
        function(d) {return d.className} // key data based on className to keep object constancy
    );

// capture the enter selection
var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

// re-use enter selection for circles
nodeEnter
    .append("circle")
    .attr("r", function (d) {return d.r;})
    .style("fill", function (d, i) {return color(i);})

// re-use enter selection for titles
nodeEnter
    .append("title")
    .text(function (d) {
        return d.className + ": " + format(d.value);
    });