CODEWITHSUNDEEP
d3.jsupdates
elk-tamer
elk-tamer

Reputation: 316

Updating child elements of data joins in d3.js

I'm having trouble grasping a basic operation in d3: updating child elements for a changing data set. The child element needs to be "appended" for the first pass, and modified for subsequent passes. For the parent element that can be controlled using the "enter" operation, but I can't see how to use it for the children. I am using the bubble layout, but I don't think that is the issue.

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

Here's a jsfiddle http://jsfiddle.net/johnpoole/xsafy/131/ with the code running.

Upvotes: 4

Views: 3365

Answers (1)

elk-tamer
elk-tamer

Reputation: 316

The answer eventually came to me. It's just a matter of doing the original "appends" on the result of the 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);
});

Upvotes: 3

Related Questions