javascript - Updating the coordinates in d3js for a tree layout -
i using d3.layout.tree() compute positions of data.
var tree = d3.layout.tree() .sort(null) .size([size.height, size.width - maxlabellength * options.fontsize]) .children(function(d) { return (!d.contents || d.contents.length === 0) ? null : d.contents; }); initially compute , add nodes this:
var nodes = tree.nodes(treedata); var nodegroup = layoutroot.selectall("g.node") .data(nodes, function (d) { return d.name }) .enter() .append("svg:g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodegroup.append("svg:circle") .attr("class", "node-dot") .attr("r", options.noderadius); now add new node treedata , layoutroot:
var grp = layoutroot.selectall("g.node") .data(nodes, function (d) { return d.name }) .enter() .append('svg:g') .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; }) grp.append("svg:circle") .attr("class", "node-dot") .attr("r", options.noderadius) the problem now, newly computed nodes present in rootlayout have different x,y coordinates after having added new node. not within enter() or exit() selection , not redrawn @ correct position. how supposed handled, ie. how should position of nodes have not changed coordinates updated/refreshed?
i noob d3js. don't harsh :d
i separate enter() selection update of nodes :
var nodegroup = layoutroot.selectall("g.node") .data(nodes, function (d) { return d.name }); // enter selection nodegroup.enter() .append("svg:g") .attr("class", "node") // update nodegroup.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); var nodedots = layoutroot.selectall("g.node-dot") .data(nodes, function (d) { return d.name }); // enter nodedots.enter() .append("circle") .attr("class", "node-dot") // update nodedots.attr("r", options.noderadius); hope helps, in general way of speaking, perhaps easier code way, separation of enter , updates (see here more info)
Comments
Post a Comment