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

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

1 个答案: