Question

I’m rendering data with d3. I have a nodes list from which I construct a bunch of SVG groups using .enter(), like this (simplified):

nodes = [{name: "Fred"}, {name: "Barney"}];
var node = vis.selectAll(".node")
    .data(nodes)
    .enter().append("svg:g")
    .attr("class", "node");
var circ = node.append("svg:circle")
    .attr("x", 0)
    .attr("y", 0)
    .attr("r", 10)
node.append("svg:text")
    .attr("dx", 0)
    .attr("dy", 0)
    .text(function(d) { return d.name });

However, if I edit a listitem’s name, the SVG text element does not update (because its text attr is only called on creation). How do I tell d3 to “recreate” the SVG group corresponding to a changed listitem? I’m doing this as part of a force layout, so I could set the text attr on every tick, but that’s rather inelegant.

Answer 1

What’s needed is to feed the data back into the nodes again. So, when I’ve updated the nodes list, I do this:

vis.selectAll(".node text")
  .data(nodes)
  .text(function(d) { return d.name });

and that recalculates.