--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/tree/tree-interactive.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Node-Link Tree</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+.node circle {
+ cursor: pointer;
+ fill: #fff;
+ stroke: steelblue;
+ stroke-width: 1.5px;
+}
+
+.node text {
+ font: 10px sans-serif;
+}
+
+path.link {
+ fill: none;
+ stroke: #ccc;
+ stroke-width: 1.5px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id="chart"></div>
+ <script type="text/javascript">
+
+var m = [20, 120, 20, 120],
+ w = 1280 - m[1] - m[3],
+ h = 800 - m[0] - m[2],
+ i = 0,
+ duration = 500,
+ root;
+
+var tree = d3.layout.tree()
+ .size([h, w]);
+
+var diagonal = d3.svg.diagonal()
+ .projection(function(d) { return [d.y, d.x]; });
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", w + m[1] + m[3])
+ .attr("height", h + m[0] + m[2])
+ .append("svg:g")
+ .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+d3.json("../data/flare.json", function(json) {
+ root = json;
+ root.x0 = h / 2;
+ root.y0 = 0;
+
+ function collapse(d) {
+ if (d.children) {
+ d._children = d.children;
+ d._children.forEach(collapse);
+ d.children = null;
+ }
+ }
+
+ root.children.forEach(collapse);
+ update(root);
+});
+
+function update(source) {
+
+ // Compute the new tree layout.
+ var nodes = tree.nodes(root).reverse();
+
+ // Normalize for fixed-depth.
+ nodes.forEach(function(d) { d.y = d.depth * 180; });
+
+ // Update the nodes…
+ var node = vis.selectAll("g.node")
+ .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+ // Enter any new nodes at the parent's previous position.
+ var nodeEnter = node.enter().append("svg:g")
+ .attr("class", "node")
+ .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+ .on("click", click);
+
+ nodeEnter.append("svg:circle")
+ .attr("r", 1e-6)
+ .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
+
+ nodeEnter.append("svg: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 to their 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 to the 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 the links…
+ var link = vis.selectAll("path.link")
+ .data(tree.links(nodes), function(d) { return d.target.id; });
+
+ // Enter any new links at the parent's previous position.
+ link.enter().insert("svg:path", "g")
+ .attr("class", "link")
+ .attr("d", function(d) {
+ var o = {x: source.x0, y: source.y0};
+ return diagonal({source: o, target: o});
+ })
+ .transition()
+ .duration(duration)
+ .attr("d", diagonal);
+
+ // Transition links to their new position.
+ link.transition()
+ .duration(duration)
+ .attr("d", diagonal);
+
+ // Transition exiting nodes to the 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 the old positions for 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);
+}
+
+ </script>
+ </body>
+</html>