d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

90 lines (84 loc) • 15.1 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Node-Link Tree</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='nodelink_tree'>Node-Link Tree</h1> <div class='gallery' id='chart'> </div><link href='tree.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='tree.js' type='text/javascript'> </script> Implementation based on work by <a href='http://jheer.org/'>Jeff Heer</a> and <a href='http://www.jasondavies.com/'>Jason Davies</a> using <a href='http://www.springerlink.com/content/u73fyc4tlxp3uwt8/'>Buchheim et al.</a>’s linear-time variant of the Reingold-Tilford algorithm. Data shows the <a href='http://flare.prefuse.org/'>Flare</a> class hierarchy, also courtesy Jeff Heer. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 var r = 960 / 2; 2 3 var tree = d3.layout.tree() 4 .size([360, r - 120]) 5 .sort(null) 6 .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; }) 7 .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); 8 9 var diagonal = d3.svg.diagonal() 10 .projection(function(d) { 11 var r = d.y, a = (d.x - 90) / 180 * Math.PI; 12 return [r * Math.cos(a), r * Math.sin(a)]; 13 }); 14 15 var vis = d3.select("#chart").append("svg:svg") 16 .attr("width", r * 2) 17 .attr("height", r * 2 - 150) 18 .append("svg:g") 19 .attr("transform", "translate(" + r + "," + r + ")"); 20 21 d3.json("flare.json", function(json) { 22 var nodes = tree(d3.entries(json)[0]); 23 24 var link = vis.selectAll("path.link") 25 .data(tree.links(nodes)) 26 .enter().append("svg:path") 27 .attr("class", "link") 28 .attr("d", diagonal); 29 30 var node = vis.selectAll("g.node") 31 .data(nodes) 32 .enter().append("svg:g") 33 .attr("class", "node") 34 .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 35 36 node.append("svg:circle") 37 .attr("r", 4.5); 38 39 node.append("svg:text") 40 .attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) 41 .attr("dy", ".31em") 42 .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) 43 .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; }) 44 .text(function(d) { return d.data.key; }); 45 }); </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>