How to dynamically add,edit,remove nodes to tree in d3.js tree -
i new d3.js,i using d3.js tree,i want add,edit,remove nodes dynamically rather predefined tree.
this code using.
var json = { "name": "base", "children": [ { "name": "type a", "children": [ { "name": "section 1", "children": [ {"name": "child 1"}, {"name": "child 2"}, {"name": "child 3"} ] }, { "name": "section 2", "children": [ {"name": "child 1"}, {"name": "child 2"}, {"name": "child 3"} ] } ] }, { "name": "type b", "children": [ { "name": "section 1", "children": [ {"name": "child 1"}, {"name": "child 2"}, {"name": "child 3"} ] }, { "name": "section 2", "children": [ {"name": "child 1"}, {"name": "child 2"}, {"name": "child 3"} ] } ] } ] }; var width = 700; var height = 650; var maxlabel = 150; var duration = 500; var radius = 5; var = 0; var root; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + maxlabel + ",0)"); root = json; root.x0 = height / 2; root.y0 = 0; root.children.foreach(collapse); function update(source) { // compute new tree layout. var nodes = tree.nodes(root).reverse(); var links = tree.links(nodes); // normalize fixed-depth. nodes.foreach(function(d) { d.y = d.depth * maxlabel; }); // update nodes… var node = svg.selectall("g.node") .data(nodes, function(d){ return d.id || (d.id = ++i); }); // enter new nodes @ parent's previous position. var nodeenter = node.enter() .append("g") .attr("class", "node") .attr("transform", function(d){ return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); nodeenter.append("circle") .attr("r", 0) .style("fill", function(d){ return d._children ? "lightsteelblue" : "white"; }); nodeenter.append("text") .attr("x", function(d){ var spacing = computeradius(d) + 5; return d.children || d._children ? -spacing : spacing; }) .attr("dy", "3") .attr("text-anchor", function(d){ return d.children || d._children ? "end" : "start"; }) .text(function(d){ return d.name; }) .style("fill-opacity", 0); // transition nodes new position. var nodeupdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeupdate.select("circle") .attr("r", function(d){ return computeradius(d); }) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeupdate.select("text").style("fill-opacity", 1); // transition exiting nodes parent's new position. var nodeexit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeexit.select("circle").attr("r", 0); nodeexit.select("text").style("fill-opacity", 0); // update links… var link = svg.selectall("path.link") .data(links, function(d){ return d.target.id; }); // enter new links @ parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d){ var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // transition links new position. link.transition() .duration(duration) .attr("d", diagonal); // transition exiting nodes parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d){ var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); // stash old positions transition. nodes.foreach(function(d){ d.x0 = d.x; d.y0 = d.y; }); } function computeradius(d) { if(d.children || d._children) return radius + (radius * nbendnodes(d) / 10); else return radius; } function nbendnodes(n) { nb = 0; if(n.children){ n.children.foreach(function(c){ nb += nbendnodes(c); }); } else if(n._children){ n._children.foreach(function(c){ nb += nbendnodes(c); }); } else nb++; return nb; } function click(d) { if (d.children){ d._children = d.children; d.children = null; } else{ d.children = d._children; d._children = null; } update(d); } function collapse(d){ if (d.children){ d._children = d.children; d._children.foreach(collapse); d.children = null; } } update(root);html{ font: 10px sans-serif; } svg{ border: 1px solid silver; } .node{ cursor: pointer; } .node circle{ stroke: steelblue; stroke-width: 1.5px; } .link{ fill: none; stroke: lightgray; stroke-width: 1.5px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id=tree></div>
to need redraw chart steps:
- first add new child node data in json
- using new data call redraw generate visualization back.
same process update , delete. data manipulation in data.
Comments
Post a Comment