--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/force/force-interactive.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Force-Directed Graph</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geom.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+circle.node {
+ cursor: pointer;
+ stroke: #3182bd;
+ stroke-width: 1.5px;
+}
+
+line.link {
+ fill: none;
+ stroke: #9ecae1;
+ stroke-width: 1.5px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id="chart"></div>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 500,
+ node,
+ link,
+ root;
+
+var force = d3.layout.force()
+ .on("tick", tick)
+ .size([w, h]);
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+
+d3.json("../data/flare.json", function(json) {
+ root = json;
+ update();
+});
+
+function update() {
+ var nodes = flatten(root),
+ links = d3.layout.tree().links(nodes);
+
+ // Restart the force layout.
+ force
+ .nodes(nodes)
+ .links(links)
+ .start();
+
+ // Update the links…
+ link = vis.selectAll("line.link")
+ .data(links, function(d) { return d.target.id; });
+
+ // Enter any new links.
+ link.enter().insert("svg:line", ".node")
+ .attr("class", "link")
+ .attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+
+ // Exit any old links.
+ link.exit().remove();
+
+ // Update the nodes…
+ node = vis.selectAll("circle.node")
+ .data(nodes, function(d) { return d.id; })
+ .style("fill", color);
+
+ // Enter any new nodes.
+ node.enter().append("svg:circle")
+ .attr("class", "node")
+ .attr("cx", function(d) { return d.x; })
+ .attr("cy", function(d) { return d.y; })
+ .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
+ .style("fill", color)
+ .on("click", click)
+ .call(force.drag);
+
+ // Exit any old nodes.
+ node.exit().remove();
+}
+
+function tick() {
+ link.attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+
+ node.attr("cx", function(d) { return d.x; })
+ .attr("cy", function(d) { return d.y; });
+}
+
+// Color leaf nodes orange, and packages white or blue.
+function color(d) {
+ return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
+}
+
+// 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();
+}
+
+// Returns a list of all nodes under the root.
+function flatten(root) {
+ var nodes = [], i = 0;
+
+ function recurse(node) {
+ if (node.children) node.children.forEach(recurse);
+ if (!node.id) node.id = ++i;
+ nodes.push(node);
+ }
+
+ recurse(root);
+ return nodes;
+}
+
+ </script>
+ </body>
+</html>