d3.js - d3 js dynamically added child nodes are not working properly -
i trying add nodes dynamically when click node doesnot show child nodes when click next node child nodes of previous node shown.what might problem
for example :click on us-east-1a not show childs when click on us-east-1b show child nodes of us-east-1a.
==========html
<!doctype html> <html> <head> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node circle { fill: gold; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom; var = 0, duration = 750, 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 + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var borderpath = svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", height) .attr("width", width) .style("stroke", 'red') .style("fill", "none") .style("stroke-width", 2); setroot("flare.json"); d3.select(self.frameelement).style("height", "800px"); function setroot(jsonname){ d3.json(jsonname, function(error, flare) { root = flare; root.x0 = height / 2; root.y0 = 0; function collapse(d) { if (d.children) { d._children = d.children; d._children.foreach(collapse); d.children = null; } } //collapsing root instead of children //collapse(root) ; root.children.foreach(collapse); update(root); }); } function update(source) { // compute new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // normalize fixed-depth. nodes.foreach(function(d) { d.y = d.depth * 180; }); // 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", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeenter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name }) .style("fill-opacity", 1e-6); // 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", 4.5) .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", 1e-6); nodeexit.select("text") .style("fill-opacity", 1e-6); // 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; }); } // toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { if(d.name=='us-east-1a'){ d3.json('flare.json', function(error, addzones) { var zones = tree.nodes(addzones.children).reverse(); d.children = zones[0]; }); }else{ d.children = d._children; } d._children = null; } update(d); } </script> </body> </html> =================json
{ "name":"vpc", "children": [ { "state": "available", "regionname": "us-east-1", "messages": [], "name": "us-east-1a" }, { "state": "available", "regionname": "us-east-1", "messages": [], "name": "us-east-1b" }, { "state": "available", "regionname": "us-east-1", "messages": [], "name": "us-east-1c" }, { "state": "available", "regionname": "us-east-1", "messages": [], "name": "us-east-1d" } ] }
Comments
Post a Comment