pv.Tree.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <meta name="generator" content="JsDoc Toolkit" />
  7. <title>JsDoc Reference - pv.Tree</title>
  8. <style type="text/css">
  9. /* default.css */
  10. body
  11. {
  12. font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
  13. width: 800px;
  14. }
  15. .header
  16. {
  17. clear: both;
  18. background-color: #ccc;
  19. padding: 8px;
  20. }
  21. h1
  22. {
  23. font-size: 150%;
  24. font-weight: bold;
  25. padding: 0;
  26. margin: 1em 0 0 .3em;
  27. }
  28. hr
  29. {
  30. border: none 0;
  31. border-top: 1px solid #7F8FB1;
  32. height: 1px;
  33. }
  34. pre.code
  35. {
  36. display: block;
  37. padding: 8px;
  38. border: 1px dashed #ccc;
  39. }
  40. #index
  41. {
  42. margin-top: 24px;
  43. float: left;
  44. width: 160px;
  45. position: absolute;
  46. left: 8px;
  47. background-color: #F3F3F3;
  48. padding: 8px;
  49. }
  50. #content
  51. {
  52. margin-left: 190px;
  53. width: 600px;
  54. }
  55. .classList
  56. {
  57. list-style-type: none;
  58. padding: 0;
  59. margin: 0 0 0 8px;
  60. font-family: arial, sans-serif;
  61. font-size: 1em;
  62. overflow: auto;
  63. }
  64. .classList li
  65. {
  66. padding: 0;
  67. margin: 0 0 8px 0;
  68. }
  69. .summaryTable { width: 100%; }
  70. h1.classTitle
  71. {
  72. font-size:170%;
  73. line-height:130%;
  74. }
  75. h2 { font-size: 110%; }
  76. caption, div.sectionTitle
  77. {
  78. background-color: #7F8FB1;
  79. color: #fff;
  80. font-size:130%;
  81. text-align: left;
  82. padding: 2px 6px 2px 6px;
  83. border: 1px #7F8FB1 solid;
  84. }
  85. div.sectionTitle { margin-bottom: 8px; }
  86. .summaryTable thead { display: none; }
  87. .summaryTable td
  88. {
  89. vertical-align: top;
  90. padding: 4px;
  91. border-bottom: 1px #7F8FB1 solid;
  92. border-right: 1px #7F8FB1 solid;
  93. }
  94. /*col#summaryAttributes {}*/
  95. .summaryTable td.attributes
  96. {
  97. border-left: 1px #7F8FB1 solid;
  98. width: 140px;
  99. text-align: right;
  100. }
  101. td.attributes, .fixedFont
  102. {
  103. line-height: 15px;
  104. color: #002EBE;
  105. font-family: "Courier New",Courier,monospace;
  106. font-size: 13px;
  107. }
  108. .summaryTable td.nameDescription
  109. {
  110. text-align: left;
  111. font-size: 13px;
  112. line-height: 15px;
  113. }
  114. .summaryTable td.nameDescription, .description
  115. {
  116. line-height: 15px;
  117. padding: 4px;
  118. padding-left: 4px;
  119. }
  120. pre
  121. {
  122. border-left: solid 10px #ddd;
  123. padding-left: 1.5em;
  124. }
  125. .summaryTable { margin-bottom: 8px; }
  126. ul.inheritsList
  127. {
  128. list-style: square;
  129. margin-left: 20px;
  130. padding-left: 0;
  131. }
  132. .detailList {
  133. margin-left: 20px;
  134. line-height: 15px;
  135. }
  136. .detailList dt { margin-left: 20px; }
  137. .detailList .heading
  138. {
  139. font-weight: bold;
  140. padding-bottom: 6px;
  141. margin-left: 0;
  142. }
  143. .light, td.attributes, .light a:link, .light a:visited
  144. {
  145. color: #777;
  146. font-style: italic;
  147. }
  148. .fineprint
  149. {
  150. text-align: right;
  151. font-size: 10px;
  152. }
  153. </style>
  154. </head>
  155. <body>
  156. <!-- ============================== header ================================= -->
  157. <!-- begin static/header.html -->
  158. <div id="header">
  159. </div>
  160. <!-- end static/header.html -->
  161. <!-- ============================== classes index ============================ -->
  162. <div id="index">
  163. <!-- begin publish.classesIndex -->
  164. <div align="center"><a href="../index.html">Class Index</a>
  165. | <a href="../files.html">File Index</a></div>
  166. <hr />
  167. <h2>Classes</h2>
  168. <ul class="classList">
  169. <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
  170. <li><a href="../symbols/Array.html">Array</a></li>
  171. <li><a href="../symbols/Date.html">Date</a></li>
  172. <li><a href="../symbols/pv.html">pv</a></li>
  173. <li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
  174. <li><a href="../symbols/pv.Area.html">pv.Area</a></li>
  175. <li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
  176. <li><a href="../symbols/pv.Color.html">pv.Color</a></li>
  177. <li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
  178. <li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
  179. <li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
  180. <li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
  181. <li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
  182. <li><a href="../symbols/pv.Image.html">pv.Image</a></li>
  183. <li><a href="../symbols/pv.Label.html">pv.Label</a></li>
  184. <li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
  185. <li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
  186. <li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
  187. <li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
  188. <li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
  189. <li><a href="../symbols/pv.Line.html">pv.Line</a></li>
  190. <li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
  191. <li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
  192. <li><a href="../symbols/pv.ns.html">pv.ns</a></li>
  193. <li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
  194. <li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
  195. <li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
  196. <li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
  197. <li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
  198. <li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
  199. <li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
  200. <li><a href="../symbols/pv.version.html">pv.version</a></li>
  201. <li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
  202. </ul>
  203. <hr />
  204. <!-- end publish.classesIndex -->
  205. </div>
  206. <div id="content">
  207. <!-- ============================== class title ============================ -->
  208. <h1 class="classTitle">
  209. Class pv.Tree
  210. </h1>
  211. <!-- ============================== class summary ========================== -->
  212. <p class="description">
  213. Represents a tree operator for the specified array. The tree operator
  214. allows a hierarchical map to be constructed from an array; it is similar to
  215. the <a href="../symbols/pv.Nest.html">pv.Nest</a> operator, except the hierarchy is derived dynamically
  216. from the array elements.
  217. <p>For example, given an array of size information for ActionScript classes:
  218. <pre>{ name: "flare.flex.FlareVis", size: 4116 },
  219. { name: "flare.physics.DragForce", size: 1082 },
  220. { name: "flare.physics.GravityForce", size: 1336 }, ...</pre>
  221. To facilitate visualization, it may be useful to nest the elements by their
  222. package hierarchy:
  223. <pre>var tree = pv.tree(classes)
  224. .keys(function(d) d.name.split("."))
  225. .map();</pre>
  226. The resulting tree is:
  227. <pre>{ flare: {
  228. flex: {
  229. FlareVis: {
  230. name: "flare.flex.FlareVis",
  231. size: 4116 } },
  232. physics: {
  233. DragForce: {
  234. name: "flare.physics.DragForce",
  235. size: 1082 },
  236. GravityForce: {
  237. name: "flare.physics.GravityForce",
  238. size: 1336 } },
  239. ... } }</pre>
  240. By specifying a value function,
  241. <pre>var tree = pv.tree(classes)
  242. .keys(function(d) d.name.split("."))
  243. .value(function(d) d.size)
  244. .map();</pre>
  245. we can further eliminate redundant data:
  246. <pre>{ flare: {
  247. flex: {
  248. FlareVis: 4116 },
  249. physics: {
  250. DragForce: 1082,
  251. GravityForce: 1336 },
  252. ... } }</pre>
  253. For visualizations with large data sets, performance improvements may be seen
  254. by storing the data in a tree format, and then flattening it into an array at
  255. runtime with <a href="../symbols/pv.Flatten.html">pv.Flatten</a>.
  256. <br /><i>Defined in: </i> <a href="../symbols/src/data_Tree.js.html">Tree.js</a>.
  257. </p>
  258. <!-- ============================== constructor summary ==================== -->
  259. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Tree.">
  260. <caption>Class Summary</caption>
  261. <thead>
  262. <tr>
  263. <th scope="col">Constructor Attributes</th>
  264. <th scope="col">Constructor Name and Description</th>
  265. </tr>
  266. </thead>
  267. <tbody>
  268. <tr>
  269. <td class="attributes">&nbsp;</td>
  270. <td class="nameDescription" >
  271. <div class="fixedFont">
  272. <b><a href="../symbols/pv.Tree.html#constructor">pv.Tree</a></b>(array)
  273. </div>
  274. <div class="description">Constructs a tree operator for the specified array.</div>
  275. </td>
  276. </tr>
  277. </tbody>
  278. </table>
  279. <!-- ============================== properties summary ===================== -->
  280. <!-- ============================== methods summary ======================== -->
  281. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Tree.">
  282. <caption>Method Summary</caption>
  283. <thead>
  284. <tr>
  285. <th scope="col">Method Attributes</th>
  286. <th scope="col">Method Name and Description</th>
  287. </tr>
  288. </thead>
  289. <tbody>
  290. <tr>
  291. <td class="attributes">&nbsp;</td>
  292. <td class="nameDescription">
  293. <div class="fixedFont"><b><a href="../symbols/pv.Tree.html#keys">keys</a></b>(k)
  294. </div>
  295. <div class="description">Assigns a <i>keys</i> function to this operator; required.</div>
  296. </td>
  297. </tr>
  298. <tr>
  299. <td class="attributes">&nbsp;</td>
  300. <td class="nameDescription">
  301. <div class="fixedFont"><b><a href="../symbols/pv.Tree.html#map">map</a></b>()
  302. </div>
  303. <div class="description">Returns a hierarchical map of values.</div>
  304. </td>
  305. </tr>
  306. <tr>
  307. <td class="attributes">&nbsp;</td>
  308. <td class="nameDescription">
  309. <div class="fixedFont"><b><a href="../symbols/pv.Tree.html#value">value</a></b>(k)
  310. </div>
  311. <div class="description">Assigns a <i>value</i> function to this operator; optional.</div>
  312. </td>
  313. </tr>
  314. </tbody>
  315. </table>
  316. <!-- ============================== events summary ======================== -->
  317. <!-- ============================== constructor details ==================== -->
  318. <div class="details"><a name="constructor"> </a>
  319. <div class="sectionTitle">
  320. Class Detail
  321. </div>
  322. <div class="fixedFont">
  323. <b>pv.Tree</b>(array)
  324. </div>
  325. <div class="description">
  326. Constructs a tree operator for the specified array. This constructor should
  327. not be invoked directly; use <a href="../symbols/pv.html#.tree">pv.tree</a> instead.
  328. </div>
  329. <dl class="detailList">
  330. <dt class="heading">Parameters:</dt>
  331. <dt>
  332. <span class="light fixedFont">{array}</span> <b>array</b>
  333. </dt>
  334. <dd>an array from which to construct a tree.</dd>
  335. </dl>
  336. </div>
  337. <!-- ============================== field details ========================== -->
  338. <!-- ============================== method details ========================= -->
  339. <div class="sectionTitle">
  340. Method Detail
  341. </div>
  342. <a name="keys"> </a>
  343. <div class="fixedFont">
  344. <span class="light">{<a href="../symbols/pv.Tree.html">pv.Tree</a>}</span>
  345. <b>keys</b>(k)
  346. </div>
  347. <div class="description">
  348. Assigns a <i>keys</i> function to this operator; required. The keys function
  349. returns an array of <tt>string</tt>s for each element in the associated
  350. array; these keys determine how the elements are nested in the tree. The
  351. returned keys should be unique for each element in the array; otherwise, the
  352. behavior of this operator is undefined.
  353. </div>
  354. <dl class="detailList">
  355. <dt class="heading">Parameters:</dt>
  356. <dt>
  357. <span class="light fixedFont">{function}</span> <b>k</b>
  358. </dt>
  359. <dd>the keys function.</dd>
  360. </dl>
  361. <dl class="detailList">
  362. <dt class="heading">Returns:</dt>
  363. <dd><span class="light fixedFont">{<a href="../symbols/pv.Tree.html">pv.Tree</a>}</span> this.</dd>
  364. </dl>
  365. <hr />
  366. <a name="map"> </a>
  367. <div class="fixedFont">
  368. <b>map</b>()
  369. </div>
  370. <div class="description">
  371. Returns a hierarchical map of values. The hierarchy is determined by the keys
  372. function; the values in the map are determined by the value function.
  373. </div>
  374. <dl class="detailList">
  375. <dt class="heading">Returns:</dt>
  376. <dd>a hierarchical map of values.</dd>
  377. </dl>
  378. <hr />
  379. <a name="value"> </a>
  380. <div class="fixedFont">
  381. <span class="light">{<a href="../symbols/pv.Tree.html">pv.Tree</a>}</span>
  382. <b>value</b>(k)
  383. </div>
  384. <div class="description">
  385. Assigns a <i>value</i> function to this operator; optional. The value
  386. function specifies an optional transformation of the element in the array
  387. before it is inserted into the map. If no value function is specified, it is
  388. equivalent to using the identity function.
  389. </div>
  390. <dl class="detailList">
  391. <dt class="heading">Parameters:</dt>
  392. <dt>
  393. <span class="light fixedFont">{function}</span> <b>k</b>
  394. </dt>
  395. <dd>the value function.</dd>
  396. </dl>
  397. <dl class="detailList">
  398. <dt class="heading">Returns:</dt>
  399. <dd><span class="light fixedFont">{<a href="../symbols/pv.Tree.html">pv.Tree</a>}</span> this.</dd>
  400. </dl>
  401. <!-- ============================== event details ========================= -->
  402. <hr />
  403. </div>
  404. <!-- ============================== footer ================================= -->
  405. <div class="fineprint" style="clear:both">
  406. Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
  407. </div>
  408. </body>
  409. </html>