pv.Panel.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681
  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.Panel</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.Panel
  210. </h1>
  211. <!-- ============================== class summary ========================== -->
  212. <p class="description">
  213. <br />Extends
  214. <a href="../symbols/pv.Bar.html">pv.Bar</a>.<br />
  215. Represents a container mark. Panels allow repeated or nested
  216. structures, commonly used in small multiple displays where a small
  217. visualization is tiled to facilitate comparison across one or more
  218. dimensions. Other types of visualizations may benefit from repeated and
  219. possibly overlapping structure as well, such as stacked area charts. Panels
  220. can also offset the position of marks to provide padding from surrounding
  221. content.
  222. <p>All Protovis displays have at least one panel; this is the root panel to
  223. which marks are rendered. The box model properties (four margins, width and
  224. height) are used to offset the positions of contained marks. The data
  225. property determines the panel count: a panel is generated once per associated
  226. datum. When nested panels are used, property functions can declare additional
  227. arguments to access the data associated with enclosing panels.
  228. <p>Panels can be rendered inline, facilitating the creation of sparklines.
  229. This allows designers to reuse browser layout features, such as text flow and
  230. tables; designers can also overlay HTML elements such as rich text and
  231. images.
  232. <p>All panels have a <tt>children</tt> array (possibly empty) containing the
  233. child marks in the order they were added. Panels also have a <tt>root</tt>
  234. field which points to the root (outermost) panel; the root panel's root field
  235. points to itself.
  236. <p>See also the <a href="../../api/">Protovis guide</a>.
  237. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Panel.js.html">Panel.js</a>.
  238. </p>
  239. <!-- ============================== constructor summary ==================== -->
  240. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Panel.">
  241. <caption>Class Summary</caption>
  242. <thead>
  243. <tr>
  244. <th scope="col">Constructor Attributes</th>
  245. <th scope="col">Constructor Name and Description</th>
  246. </tr>
  247. </thead>
  248. <tbody>
  249. <tr>
  250. <td class="attributes">&nbsp;</td>
  251. <td class="nameDescription" >
  252. <div class="fixedFont">
  253. <b><a href="../symbols/pv.Panel.html#constructor">pv.Panel</a></b>()
  254. </div>
  255. <div class="description">Constructs a new, empty panel with default properties.</div>
  256. </td>
  257. </tr>
  258. </tbody>
  259. </table>
  260. <!-- ============================== properties summary ===================== -->
  261. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Panel.">
  262. <caption>Field Summary</caption>
  263. <thead>
  264. <tr>
  265. <th scope="col">Field Attributes</th>
  266. <th scope="col">Field Name and Description</th>
  267. </tr>
  268. </thead>
  269. <tbody>
  270. <tr>
  271. <td class="attributes">&nbsp;</td>
  272. <td class="nameDescription">
  273. <div class="fixedFont">
  274. <b><a href="../symbols/pv.Panel.html#canvas">canvas</a></b>
  275. </div>
  276. <div class="description">The canvas element; either the string ID of the canvas element in the current
  277. document, or a reference to the canvas element itself.</div>
  278. </td>
  279. </tr>
  280. <tr>
  281. <td class="attributes">&nbsp;</td>
  282. <td class="nameDescription">
  283. <div class="fixedFont">
  284. <b><a href="../symbols/pv.Panel.html#children">children</a></b>
  285. </div>
  286. <div class="description">The child marks; zero or more <a href="../symbols/pv.Mark.html">pv.Mark</a>s in the order they were
  287. added.</div>
  288. </td>
  289. </tr>
  290. <tr>
  291. <td class="attributes">&nbsp;</td>
  292. <td class="nameDescription">
  293. <div class="fixedFont">
  294. <b><a href="../symbols/pv.Panel.html#defaults">defaults</a></b>
  295. </div>
  296. <div class="description">Default properties for panels.</div>
  297. </td>
  298. </tr>
  299. </tbody>
  300. </table>
  301. <dl class="inheritsList">
  302. <dt>Fields borrowed from class <a href="../symbols/pv.Bar.html">pv.Bar</a>: </dt><dd><a href="../symbols/pv.Bar.html#fillStyle">fillStyle</a>, <a href="../symbols/pv.Bar.html#height">height</a>, <a href="../symbols/pv.Bar.html#lineWidth">lineWidth</a>, <a href="../symbols/pv.Bar.html#strokeStyle">strokeStyle</a>, <a href="../symbols/pv.Bar.html#width">width</a></dd><dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
  303. </dl>
  304. <!-- ============================== methods summary ======================== -->
  305. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Panel.">
  306. <caption>Method Summary</caption>
  307. <thead>
  308. <tr>
  309. <th scope="col">Method Attributes</th>
  310. <th scope="col">Method Name and Description</th>
  311. </tr>
  312. </thead>
  313. <tbody>
  314. <tr>
  315. <td class="attributes">&nbsp;</td>
  316. <td class="nameDescription">
  317. <div class="fixedFont"><b><a href="../symbols/pv.Panel.html#add">add</a></b>(type)
  318. </div>
  319. <div class="description">Adds a new mark of the specified type to this panel.</div>
  320. </td>
  321. </tr>
  322. <tr>
  323. <td class="attributes">&nbsp;</td>
  324. <td class="nameDescription">
  325. <div class="fixedFont"><b><a href="../symbols/pv.Panel.html#anchor">anchor</a></b>(name)
  326. </div>
  327. <div class="description">Returns an anchor with the specified name.</div>
  328. </td>
  329. </tr>
  330. </tbody>
  331. </table>
  332. <dl class="inheritsList">
  333. <dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
  334. </dl>
  335. <!-- ============================== events summary ======================== -->
  336. <!-- ============================== constructor details ==================== -->
  337. <div class="details"><a name="constructor"> </a>
  338. <div class="sectionTitle">
  339. Class Detail
  340. </div>
  341. <div class="fixedFont">
  342. <b>pv.Panel</b>()
  343. </div>
  344. <div class="description">
  345. Constructs a new, empty panel with default properties. Panels, with the
  346. exception of the root panel, are not typically constructed directly; instead,
  347. they are added to an existing panel or mark via <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  348. </div>
  349. </div>
  350. <!-- ============================== field details ========================== -->
  351. <div class="sectionTitle">
  352. Field Detail
  353. </div>
  354. <a name="canvas"> </a>
  355. <div class="fixedFont">
  356. <span class="light">{string}</span>
  357. <b>canvas</b>
  358. </div>
  359. <div class="description">
  360. The canvas element; either the string ID of the canvas element in the current
  361. document, or a reference to the canvas element itself. If null, a canvas
  362. element will be created and inserted into the document at the location of the
  363. script element containing the current Protovis specification. This property
  364. only applies to root panels and is ignored on nested panels.
  365. <p>Note: the "canvas" element here refers to a <tt>div</tt> (or other suitable
  366. HTML container element), <i>not</i> a <tt>canvas</tt> element. The name of
  367. this property is a historical anachronism from the first implementation that
  368. used HTML 5 canvas, rather than SVG.
  369. </div>
  370. <hr />
  371. <a name="children"> </a>
  372. <div class="fixedFont">
  373. <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>[]}</span>
  374. <b>children</b>
  375. </div>
  376. <div class="description">
  377. The child marks; zero or more <a href="../symbols/pv.Mark.html">pv.Mark</a>s in the order they were
  378. added.
  379. </div>
  380. <dl class="detailList">
  381. <dt class="heading">See:</dt>
  382. <dd><a href="#add">#add</a></dd>
  383. </dl>
  384. <hr />
  385. <a name="defaults"> </a>
  386. <div class="fixedFont">
  387. <span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
  388. <b>defaults</b>
  389. </div>
  390. <div class="description">
  391. Default properties for panels. By default, the margins are zero, the fill
  392. style is transparent.
  393. </div>
  394. <!-- ============================== method details ========================= -->
  395. <div class="sectionTitle">
  396. Method Detail
  397. </div>
  398. <a name="add"> </a>
  399. <div class="fixedFont">
  400. <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
  401. <b>add</b>(type)
  402. </div>
  403. <div class="description">
  404. Adds a new mark of the specified type to this panel. Unlike the normal
  405. Mark#add behavior, adding a mark to a panel does not cause the mark
  406. to inherit from the panel. Since the contained marks are offset by the panel
  407. margins already, inheriting properties is generally undesirable; of course,
  408. it is always possible to change this behavior by calling Mark#extend
  409. explicitly.
  410. </div>
  411. <dl class="detailList">
  412. <dt class="heading">Parameters:</dt>
  413. <dt>
  414. <span class="light fixedFont">{function}</span> <b>type</b>
  415. </dt>
  416. <dd>the type of the new mark to add.</dd>
  417. </dl>
  418. <dl class="detailList">
  419. <dt class="heading">Returns:</dt>
  420. <dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the new mark.</dd>
  421. </dl>
  422. <hr />
  423. <a name="anchor"> </a>
  424. <div class="fixedFont">
  425. <span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
  426. <b>anchor</b>(name)
  427. </div>
  428. <div class="description">
  429. Returns an anchor with the specified name. This method is overridden since
  430. the behavior of Panel anchors is slightly different from normal anchors:
  431. adding to an anchor adds to the anchor target's, rather than the anchor
  432. target's parent. To avoid double margins, we override the anchor's proto so
  433. that the margins are zero.
  434. </div>
  435. <dl class="detailList">
  436. <dt class="heading">Parameters:</dt>
  437. <dt>
  438. <span class="light fixedFont">{string}</span> <b>name</b>
  439. </dt>
  440. <dd>the anchor name; either a string or a property function.</dd>
  441. </dl>
  442. <dl class="detailList">
  443. <dt class="heading">Returns:</dt>
  444. <dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> the new anchor.</dd>
  445. </dl>
  446. <!-- ============================== event details ========================= -->
  447. <hr />
  448. </div>
  449. <!-- ============================== footer ================================= -->
  450. <div class="fineprint" style="clear:both">
  451. 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)
  452. </div>
  453. </body>
  454. </html>