d3.js - 在 d3.js 中更新数据连接的子元素

Question

我无法掌握 d3 中的基本操作：为不断变化的数据集更新子元素。子元素需要在第一次传递时“附加”，并为后续传递进行修改。对于可以使用“enter”操作控制的父元素，但我看不到如何将它用于子元素。我正在使用气泡布局，但我认为这不是问题。

var node = vis.selectAll("g.node").data(
bubble.nodes(classes(json)).filter(function (d) {
    return !d.children;
}), function (d) {
    return d.className;
});

node.select("circle").attr("r", function (d) {
    return d.r;
});

node.enter().append("g").attr("class", "node")
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
});

node.append("circle").attr("r", function (d) {
    return d.r;
});

这是一个运行代码的 jsfiddle http://jsfiddle.net/johnpoole/xsafy/131/。

Answer 1

答案最终来到了我的面前。只需在 enter() 的结果上执行原始“附加”

var node = vis.selectAll("g.node").data(
    bubble.nodes(classes(json)).filter(function(d) {
        return !d.children;
    }), function(d) {
        return d.className;
    });

node.select("circle").attr("r", function(d) {
        return d.r;
    }).style("fill", function(d) {
        return fill(d.r);
    });
    
node.enter().append("g").attr("class", "node")
.attr("transform", function(d) { 
        return "translate(" + d.x + ","+ d.y +     ")";
}).append("circle").attr("r", function(d) {
        return d.r;
}).style("fill", function(d) {
        return fill(d.className);
});