UNPKG

d3

Version:

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

mbostock.github.com/d3/

mbostock/d3

86 lines (80 loc) • 12 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Dendrogram</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> <b><a href="../ex/">Examples</a></b> <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='dendrogram'>Dendrogram</h1> <div class='gallery' id='chart'> </div><link href='cluster.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='cluster.js' type='text/javascript'> </script> <p>Data shows the <a href='http://flare.prefuse.org/'>Flare</a> class hierarchy, courtesy Jeff Heer.</p> <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'><span class='lineno'> 1</span> <span class='kd'>var</span> <span class='nx'>w</span> <span class='o'>=</span> <span class='mi'>960</span><span class='p'>,</span> <span class='lineno'> 2</span> <span class='nx'>h</span> <span class='o'>=</span> <span class='mi'>2200</span><span class='p'>;</span> <span class='lineno'> 3</span> <span class='lineno'> 4</span> <span class='kd'>var</span> <span class='nx'>cluster</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>layout</span><span class='p'>.</span><span class='nx'>cluster</span><span class='p'>()</span> <span class='lineno'> 5</span> <span class='p'>.</span><span class='nx'>size</span><span class='p'>([</span><span class='nx'>h</span><span class='p'>,</span> <span class='nx'>w</span> <span class='o'>-</span> <span class='mi'>160</span><span class='p'>])</span> <span class='lineno'> 6</span> <span class='p'>.</span><span class='nx'>sort</span><span class='p'>(</span><span class='kc'>null</span><span class='p'>)</span> <span class='lineno'> 7</span> <span class='p'>.</span><span class='nx'>children</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nb'>isNaN</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>.</span><span class='nx'>value</span><span class='p'>)</span> <span class='o'>?</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>entries</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>.</span><span class='nx'>value</span><span class='p'>)</span> <span class='o'>:</span> <span class='kc'>null</span><span class='p'>;</span> <span class='p'>});</span> <span class='lineno'> 8</span> <span class='lineno'> 9</span> <span class='kd'>var</span> <span class='nx'>diagonal</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>svg</span><span class='p'>.</span><span class='nx'>diagonal</span><span class='p'>()</span> <span class='lineno'>10</span> <span class='p'>.</span><span class='nx'>projection</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='p'>[</span><span class='nx'>d</span><span class='p'>.</span><span class='nx'>y</span><span class='p'>,</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>x</span><span class='p'>];</span> <span class='p'>});</span> <span class='lineno'>11</span> <span class='lineno'>12</span> <span class='kd'>var</span> <span class='nx'>vis</span> <span class='o'>=</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>select</span><span class='p'>(</span><span class='s2'>&quot;#chart&quot;</span><span class='p'>).</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:svg&quot;</span><span class='p'>)</span> <span class='lineno'>13</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;width&quot;</span><span class='p'>,</span> <span class='nx'>w</span><span class='p'>)</span> <span class='lineno'>14</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;height&quot;</span><span class='p'>,</span> <span class='nx'>h</span><span class='p'>)</span> <span class='lineno'>15</span> <span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:g&quot;</span><span class='p'>)</span> <span class='lineno'>16</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;transform&quot;</span><span class='p'>,</span> <span class='s2'>&quot;translate(40, 0)&quot;</span><span class='p'>);</span> <span class='lineno'>17</span> <span class='lineno'>18</span> <span class='nx'>d3</span><span class='p'>.</span><span class='nx'>json</span><span class='p'>(</span><span class='s2'>&quot;flare.json&quot;</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>)</span> <span class='p'>{</span> <span class='lineno'>19</span> <span class='kd'>var</span> <span class='nx'>nodes</span> <span class='o'>=</span> <span class='nx'>cluster</span><span class='p'>(</span><span class='nx'>d3</span><span class='p'>.</span><span class='nx'>entries</span><span class='p'>(</span><span class='nx'>json</span><span class='p'>)[</span><span class='mi'>0</span><span class='p'>]);</span> <span class='lineno'>20</span> <span class='lineno'>21</span> <span class='kd'>var</span> <span class='nx'>link</span> <span class='o'>=</span> <span class='nx'>vis</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>&quot;path.link&quot;</span><span class='p'>)</span> <span class='lineno'>22</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>cluster</span><span class='p'>.</span><span class='nx'>links</span><span class='p'>(</span><span class='nx'>nodes</span><span class='p'>))</span> <span class='lineno'>23</span> <span class='p'>.</span><span class='nx'>enter</span><span class='p'>().</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:path&quot;</span><span class='p'>)</span> <span class='lineno'>24</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;class&quot;</span><span class='p'>,</span> <span class='s2'>&quot;link&quot;</span><span class='p'>)</span> <span class='lineno'>25</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;d&quot;</span><span class='p'>,</span> <span class='nx'>diagonal</span><span class='p'>);</span> <span class='lineno'>26</span> <span class='lineno'>27</span> <span class='kd'>var</span> <span class='nx'>node</span> <span class='o'>=</span> <span class='nx'>vis</span><span class='p'>.</span><span class='nx'>selectAll</span><span class='p'>(</span><span class='s2'>&quot;g.node&quot;</span><span class='p'>)</span> <span class='lineno'>28</span> <span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='nx'>nodes</span><span class='p'>)</span> <span class='lineno'>29</span> <span class='p'>.</span><span class='nx'>enter</span><span class='p'>().</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:g&quot;</span><span class='p'>)</span> <span class='lineno'>30</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;class&quot;</span><span class='p'>,</span> <span class='s2'>&quot;node&quot;</span><span class='p'>)</span> <span class='lineno'>31</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;transform&quot;</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='s2'>&quot;translate(&quot;</span> <span class='o'>+</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>y</span> <span class='o'>+</span> <span class='s2'>&quot;,&quot;</span> <span class='o'>+</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>+</span> <span class='s2'>&quot;)&quot;</span><span class='p'>;</span> <span class='p'>})</span> <span class='lineno'>32</span> <span class='lineno'>33</span> <span class='nx'>node</span><span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:circle&quot;</span><span class='p'>)</span> <span class='lineno'>34</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;r&quot;</span><span class='p'>,</span> <span class='mf'>4.5</span><span class='p'>);</span> <span class='lineno'>35</span> <span class='lineno'>36</span> <span class='nx'>node</span><span class='p'>.</span><span class='nx'>append</span><span class='p'>(</span><span class='s2'>&quot;svg:text&quot;</span><span class='p'>)</span> <span class='lineno'>37</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;dx&quot;</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>children</span> <span class='o'>?</span> <span class='o'>-</span><span class='mi'>8</span> <span class='o'>:</span> <span class='mi'>8</span><span class='p'>;</span> <span class='p'>})</span> <span class='lineno'>38</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;dy&quot;</span><span class='p'>,</span> <span class='mi'>3</span><span class='p'>)</span> <span class='lineno'>39</span> <span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s2'>&quot;text-anchor&quot;</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>children</span> <span class='o'>?</span> <span class='s2'>&quot;end&quot;</span> <span class='o'>:</span> <span class='s2'>&quot;start&quot;</span><span class='p'>;</span> <span class='p'>})</span> <span class='lineno'>40</span> <span class='p'>.</span><span class='nx'>text</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(</span><span class='nx'>d</span><span class='p'>)</span> <span class='p'>{</span> <span class='k'>return</span> <span class='nx'>d</span><span class='p'>.</span><span class='nx'>data</span><span class='p'>.</span><span class='nx'>key</span><span class='p'>;</span> <span class='p'>});</span> <span class='lineno'>41</span> <span class='p'>});</span> </code></pre> </div> </div> <div class="foot">Copyright &copy; 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>