×

Welcome to TagMyCode

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