| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|---|
| 5 | <title>Node-Link Tree</title> |
|---|
| 6 | <script type="text/javascript" src="../../d3.js"></script> |
|---|
| 7 | <script type="text/javascript" src="../../d3.layout.js"></script> |
|---|
| 8 | <style type="text/css"> |
|---|
| 9 | |
|---|
| 10 | circle.node { |
|---|
| 11 | cursor: pointer; |
|---|
| 12 | fill: #fff; |
|---|
| 13 | stroke: steelblue; |
|---|
| 14 | stroke-width: 1.5px; |
|---|
| 15 | } |
|---|
| 16 | |
|---|
| 17 | path.link { |
|---|
| 18 | fill: none; |
|---|
| 19 | stroke: #ccc; |
|---|
| 20 | stroke-width: 1.5px; |
|---|
| 21 | } |
|---|
| 22 | |
|---|
| 23 | </style> |
|---|
| 24 | </head> |
|---|
| 25 | <body> |
|---|
| 26 | <div id="chart"></div> |
|---|
| 27 | <script type="text/javascript"> |
|---|
| 28 | |
|---|
| 29 | var w = 960, |
|---|
| 30 | h = 2000, |
|---|
| 31 | i = 0, |
|---|
| 32 | duration = 500, |
|---|
| 33 | root; |
|---|
| 34 | |
|---|
| 35 | var tree = d3.layout.tree() |
|---|
| 36 | .size([h, w - 160]); |
|---|
| 37 | |
|---|
| 38 | var diagonal = d3.svg.diagonal() |
|---|
| 39 | .projection(function(d) { return [d.y, d.x]; }); |
|---|
| 40 | |
|---|
| 41 | var vis = d3.select("#chart").append("svg:svg") |
|---|
| 42 | .attr("width", w) |
|---|
| 43 | .attr("height", h) |
|---|
| 44 | .append("svg:g") |
|---|
| 45 | .attr("transform", "translate(40,0)"); |
|---|
| 46 | |
|---|
| 47 | d3.json("../data/flare.json", function(json) { |
|---|
| 48 | json.x0 = 800; |
|---|
| 49 | json.y0 = 0; |
|---|
| 50 | update(root = json); |
|---|
| 51 | }); |
|---|
| 52 | |
|---|
| 53 | function update(source) { |
|---|
| 54 | |
|---|
| 55 | // Compute the new tree layout. |
|---|
| 56 | var nodes = tree.nodes(root).reverse(); |
|---|
| 57 | |
|---|
| 58 | // Update the nodes⊠|
|---|
| 59 | var node = vis.selectAll("circle.node") |
|---|
| 60 | .data(nodes, function(d) { return d.id || (d.id = ++i); }); |
|---|
| 61 | |
|---|
| 62 | // Enter any new nodes at the parent's previous position. |
|---|
| 63 | node.enter().append("svg:circle") |
|---|
| 64 | .attr("class", "node") |
|---|
| 65 | .attr("cx", function(d) { return source.y0; }) |
|---|
| 66 | .attr("cy", function(d) { return source.x0; }) |
|---|
| 67 | .attr("r", 4.5) |
|---|
| 68 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) |
|---|
| 69 | .on("click", click) |
|---|
| 70 | .transition() |
|---|
| 71 | .duration(duration) |
|---|
| 72 | .attr("cx", function(d) { return d.y; }) |
|---|
| 73 | .attr("cy", function(d) { return d.x; }); |
|---|
| 74 | |
|---|
| 75 | // Transition nodes to their new position. |
|---|
| 76 | node.transition() |
|---|
| 77 | .duration(duration) |
|---|
| 78 | .attr("cx", function(d) { return d.y; }) |
|---|
| 79 | .attr("cy", function(d) { return d.x; }) |
|---|
| 80 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); |
|---|
| 81 | |
|---|
| 82 | // Transition exiting nodes to the parent's new position. |
|---|
| 83 | node.exit().transition() |
|---|
| 84 | .duration(duration) |
|---|
| 85 | .attr("cx", function(d) { return source.y; }) |
|---|
| 86 | .attr("cy", function(d) { return source.x; }) |
|---|
| 87 | .remove(); |
|---|
| 88 | |
|---|
| 89 | // Update the links⊠|
|---|
| 90 | var link = vis.selectAll("path.link") |
|---|
| 91 | .data(tree.links(nodes), function(d) { return d.target.id; }); |
|---|
| 92 | |
|---|
| 93 | // Enter any new links at the parent's previous position. |
|---|
| 94 | link.enter().insert("svg:path", "circle") |
|---|
| 95 | .attr("class", "link") |
|---|
| 96 | .attr("d", function(d) { |
|---|
| 97 | var o = {x: source.x0, y: source.y0}; |
|---|
| 98 | return diagonal({source: o, target: o}); |
|---|
| 99 | }) |
|---|
| 100 | .transition() |
|---|
| 101 | .duration(duration) |
|---|
| 102 | .attr("d", diagonal); |
|---|
| 103 | |
|---|
| 104 | // Transition links to their new position. |
|---|
| 105 | link.transition() |
|---|
| 106 | .duration(duration) |
|---|
| 107 | .attr("d", diagonal); |
|---|
| 108 | |
|---|
| 109 | // Transition exiting nodes to the parent's new position. |
|---|
| 110 | link.exit().transition() |
|---|
| 111 | .duration(duration) |
|---|
| 112 | .attr("d", function(d) { |
|---|
| 113 | var o = {x: source.x, y: source.y}; |
|---|
| 114 | return diagonal({source: o, target: o}); |
|---|
| 115 | }) |
|---|
| 116 | .remove(); |
|---|
| 117 | |
|---|
| 118 | // Stash the old positions for transition. |
|---|
| 119 | nodes.forEach(function(d) { |
|---|
| 120 | d.x0 = d.x; |
|---|
| 121 | d.y0 = d.y; |
|---|
| 122 | }); |
|---|
| 123 | } |
|---|
| 124 | |
|---|
| 125 | // Toggle children on click. |
|---|
| 126 | function click(d) { |
|---|
| 127 | if (d.children) { |
|---|
| 128 | d._children = d.children; |
|---|
| 129 | d.children = null; |
|---|
| 130 | } else { |
|---|
| 131 | d.children = d._children; |
|---|
| 132 | d._children = null; |
|---|
| 133 | } |
|---|
| 134 | update(d); |
|---|
| 135 | } |
|---|
| 136 | |
|---|
| 137 | </script> |
|---|
| 138 | </body> |
|---|
| 139 | </html> |
|---|
