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