|
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 .node circle { |
|
11 cursor: pointer; |
|
12 fill: #fff; |
|
13 stroke: steelblue; |
|
14 stroke-width: 1.5px; |
|
15 } |
|
16 |
|
17 .node text { |
|
18 font: 10px sans-serif; |
|
19 } |
|
20 |
|
21 path.link { |
|
22 fill: none; |
|
23 stroke: #ccc; |
|
24 stroke-width: 1.5px; |
|
25 } |
|
26 |
|
27 </style> |
|
28 </head> |
|
29 <body> |
|
30 <div id="chart"></div> |
|
31 <script type="text/javascript"> |
|
32 |
|
33 var m = [20, 120, 20, 120], |
|
34 w = 1280 - m[1] - m[3], |
|
35 h = 800 - m[0] - m[2], |
|
36 i = 0, |
|
37 duration = 500, |
|
38 root; |
|
39 |
|
40 var tree = d3.layout.tree() |
|
41 .size([h, w]); |
|
42 |
|
43 var diagonal = d3.svg.diagonal() |
|
44 .projection(function(d) { return [d.y, d.x]; }); |
|
45 |
|
46 var vis = d3.select("#chart").append("svg:svg") |
|
47 .attr("width", w + m[1] + m[3]) |
|
48 .attr("height", h + m[0] + m[2]) |
|
49 .append("svg:g") |
|
50 .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
51 |
|
52 d3.json("../data/flare.json", function(json) { |
|
53 root = json; |
|
54 root.x0 = h / 2; |
|
55 root.y0 = 0; |
|
56 |
|
57 function collapse(d) { |
|
58 if (d.children) { |
|
59 d._children = d.children; |
|
60 d._children.forEach(collapse); |
|
61 d.children = null; |
|
62 } |
|
63 } |
|
64 |
|
65 root.children.forEach(collapse); |
|
66 update(root); |
|
67 }); |
|
68 |
|
69 function update(source) { |
|
70 |
|
71 // Compute the new tree layout. |
|
72 var nodes = tree.nodes(root).reverse(); |
|
73 |
|
74 // Normalize for fixed-depth. |
|
75 nodes.forEach(function(d) { d.y = d.depth * 180; }); |
|
76 |
|
77 // Update the nodes… |
|
78 var node = vis.selectAll("g.node") |
|
79 .data(nodes, function(d) { return d.id || (d.id = ++i); }); |
|
80 |
|
81 // Enter any new nodes at the parent's previous position. |
|
82 var nodeEnter = node.enter().append("svg:g") |
|
83 .attr("class", "node") |
|
84 .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) |
|
85 .on("click", click); |
|
86 |
|
87 nodeEnter.append("svg:circle") |
|
88 .attr("r", 1e-6) |
|
89 .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); |
|
90 |
|
91 nodeEnter.append("svg:text") |
|
92 .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) |
|
93 .attr("dy", ".35em") |
|
94 .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) |
|
95 .text(function(d) { return d.name; }) |
|
96 .style("fill-opacity", 1e-6); |
|
97 |
|
98 // Transition nodes to their new position. |
|
99 var nodeUpdate = node.transition() |
|
100 .duration(duration) |
|
101 .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); |
|
102 |
|
103 nodeUpdate.select("circle") |
|
104 .attr("r", 4.5) |
|
105 .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); |
|
106 |
|
107 nodeUpdate.select("text") |
|
108 .style("fill-opacity", 1); |
|
109 |
|
110 // Transition exiting nodes to the parent's new position. |
|
111 var nodeExit = node.exit().transition() |
|
112 .duration(duration) |
|
113 .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) |
|
114 .remove(); |
|
115 |
|
116 nodeExit.select("circle") |
|
117 .attr("r", 1e-6); |
|
118 |
|
119 nodeExit.select("text") |
|
120 .style("fill-opacity", 1e-6); |
|
121 |
|
122 // Update the links… |
|
123 var link = vis.selectAll("path.link") |
|
124 .data(tree.links(nodes), function(d) { return d.target.id; }); |
|
125 |
|
126 // Enter any new links at the parent's previous position. |
|
127 link.enter().insert("svg:path", "g") |
|
128 .attr("class", "link") |
|
129 .attr("d", function(d) { |
|
130 var o = {x: source.x0, y: source.y0}; |
|
131 return diagonal({source: o, target: o}); |
|
132 }) |
|
133 .transition() |
|
134 .duration(duration) |
|
135 .attr("d", diagonal); |
|
136 |
|
137 // Transition links to their new position. |
|
138 link.transition() |
|
139 .duration(duration) |
|
140 .attr("d", diagonal); |
|
141 |
|
142 // Transition exiting nodes to the parent's new position. |
|
143 link.exit().transition() |
|
144 .duration(duration) |
|
145 .attr("d", function(d) { |
|
146 var o = {x: source.x, y: source.y}; |
|
147 return diagonal({source: o, target: o}); |
|
148 }) |
|
149 .remove(); |
|
150 |
|
151 // Stash the old positions for transition. |
|
152 nodes.forEach(function(d) { |
|
153 d.x0 = d.x; |
|
154 d.y0 = d.y; |
|
155 }); |
|
156 } |
|
157 |
|
158 // Toggle children on click. |
|
159 function click(d) { |
|
160 if (d.children) { |
|
161 d._children = d.children; |
|
162 d.children = null; |
|
163 } else { |
|
164 d.children = d._children; |
|
165 d._children = null; |
|
166 } |
|
167 update(d); |
|
168 } |
|
169 |
|
170 </script> |
|
171 </body> |
|
172 </html> |