i got d3.js code create tree, have happily done, can't figure out how start tree collapsed.
i found this post explains how didn't seem code: edit javascript switch _children , children attributes every node. done so
var treedata = [ { "name": "product", "parent": "null", "children": [ <!-------------- branch -----------> { "name": "servers", "parent": "top level", "children": [{ "name": "options (hard disk / ram / psu / network cards etc)", "parent": "servers" }, { "name": "software licensing – microsoft o/s?", "parent": "servers" }, { "name": "switching – hp / cisco", "parent": "servers" }, { "name": "ups – apc", "parent": "servers" }, { "name": "cabling", "parent": "servers" }, { "name": "warranty – ecare+ / hp care pack?", "parent": "servers" }, { "name": "engineer installation – on-site / remote log-in?", "parent": "servers" }, { "name": "config centre – build & test server , parts prior delivery", "parent": "servers" }, { "name": "telephone support credits", "parent": "servers" } ] }, <!-------------- branch -----------> { "name": "pc/laptop/workstation", "parent": "top level", "children": [{ "name": "monitor", "parent": "pc/laptop/workstation" }, { "name": "docking station", "parent": "pc/laptop/workstation" }, { "name": "microsoft office license", "parent": "pc/laptop/workstation" }, { "name": "carry case (laptop)", "parent": "pc/laptop/workstation" }, { "name": "accessories – mouse/keyboard/riser/keylock", "parent": "pc/laptop/workstation" }, { "name": "config centre – desktop imaging/adding 2nd hd or ram", "parent": "pc/laptop/workstation" }, { "name": "on-site installation – desktop rollout", "parent": "pc/laptop/workstation" }, { "name": "telephone support credits", "parent": "pc/laptop/workstation" } ] }, <!-------------- branch -----------> { "name": "switches", "parent": "top level", "children": [{ "name": "sfp/transceivers", "parent": "switches" }, { "name": "cables", "parent": "switches" }, { "name": "config centre – pre-delivery config work", "parent": "switches" }, { "name": "network cards", "parent": "switches" }, { "name": "on-site installation", "parent": "switches" } ] }, <!-------------- branch -----------> <!-------------- end -----------> ] }, ]; // ************** generate tree diagram ***************** var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 500 - 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 + ")"); root = treedata[0]; root.x0 = height / 2; root.y0 = 0; update(root); d3.select(self.frameelement).style("height", "500px"); 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 * 250; }); // 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 ? -13 : 13; }) .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", 10) .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 { d.children = d._children; d._children = null; } update(d); } .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; background-color:## } .link { fill: none; stroke: #ccc; stroke-width: 2px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>
all needs change children _children root node.
var treedata = [ { "name": "product", "parent": "null", "_children": [ <!-------------- branch -----------> { "name": "servers", "parent": "top level", "_children": [{ "name": "options (hard disk / ram / psu / network cards etc)", "parent": "servers" }, { "name": "software licensing – microsoft o/s?", "parent": "servers" }, { "name": "switching – hp / cisco", "parent": "servers" }, { "name": "ups – apc", "parent": "servers" }, { "name": "cabling", "parent": "servers" }, { "name": "warranty – ecare+ / hp care pack?", "parent": "servers" }, { "name": "engineer installation – on-site / remote log-in?", "parent": "servers" }, { "name": "config centre – build & test server , parts prior delivery", "parent": "servers" }, { "name": "telephone support credits", "parent": "servers" } ] }, <!-------------- branch -----------> { "name": "pc/laptop/workstation", "parent": "top level", "_children": [{ "name": "monitor", "parent": "pc/laptop/workstation" }, { "name": "docking station", "parent": "pc/laptop/workstation" }, { "name": "microsoft office license", "parent": "pc/laptop/workstation" }, { "name": "carry case (laptop)", "parent": "pc/laptop/workstation" }, { "name": "accessories – mouse/keyboard/riser/keylock", "parent": "pc/laptop/workstation" }, { "name": "config centre – desktop imaging/adding 2nd hd or ram", "parent": "pc/laptop/workstation" }, { "name": "on-site installation – desktop rollout", "parent": "pc/laptop/workstation" }, { "name": "telephone support credits", "parent": "pc/laptop/workstation" } ] }, <!-------------- branch -----------> { "name": "switches", "parent": "top level", "_children": [{ "name": "sfp/transceivers", "parent": "switches" }, { "name": "cables", "parent": "switches" }, { "name": "config centre – pre-delivery config work", "parent": "switches" }, { "name": "network cards", "parent": "switches" }, { "name": "on-site installation", "parent": "switches" } ] }, <!-------------- branch -----------> <!-------------- end -----------> ] }, ]; // ************** generate tree diagram ***************** var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 500 - 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 + ")"); root = treedata[0]; root.x0 = height / 2; root.y0 = 0; update(root); d3.select(self.frameelement).style("height", "500px"); 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 * 250; }); // 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 ? -13 : 13; }) .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", 10) .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 { d.children = d._children; d._children = null; } update(d); } .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; background-color:## } .link { fill: none; stroke: #ccc; stroke-width: 2px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>note may need full screen snipper see results.
Comments
Post a Comment