pv.Rule.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713
  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.Rule</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.Rule
  210. </h1>
  211. <!-- ============================== class summary ========================== -->
  212. <p class="description">
  213. <br />Extends
  214. <a href="../symbols/pv.Mark.html">pv.Mark</a>.<br />
  215. Represents a horizontal or vertical rule. Rules are frequently used
  216. for axes and grid lines. For example, specifying only the bottom property
  217. draws horizontal rules, while specifying only the left draws vertical
  218. rules. Rules can also be used as thin bars. The visual style is controlled in
  219. the same manner as lines.
  220. <p>Rules are positioned exclusively the standard box model properties. The
  221. following combinations of properties are supported:
  222. <table>
  223. <thead><th style="width:12em;">Properties</th><th>Orientation</th></thead>
  224. <tbody>
  225. <tr><td>left</td><td>vertical</td></tr>
  226. <tr><td>right</td><td>vertical</td></tr>
  227. <tr><td>left, bottom, top</td><td>vertical</td></tr>
  228. <tr><td>right, bottom, top</td><td>vertical</td></tr>
  229. <tr><td>top</td><td>horizontal</td></tr>
  230. <tr><td>bottom</td><td>horizontal</td></tr>
  231. <tr><td>top, left, right</td><td>horizontal</td></tr>
  232. <tr><td>bottom, left, right</td><td>horizontal</td></tr>
  233. <tr><td>left, top, height</td><td>vertical</td></tr>
  234. <tr><td>left, bottom, height</td><td>vertical</td></tr>
  235. <tr><td>right, top, height</td><td>vertical</td></tr>
  236. <tr><td>right, bottom, height</td><td>vertical</td></tr>
  237. <tr><td>left, top, width</td><td>horizontal</td></tr>
  238. <tr><td>left, bottom, width</td><td>horizontal</td></tr>
  239. <tr><td>right, top, width</td><td>horizontal</td></tr>
  240. <tr><td>right, bottom, width</td><td>horizontal</td></tr>
  241. </tbody>
  242. </table>
  243. <p>Small rules can be used as tick marks; alternatively, a Dot with
  244. the "tick" shape can be used.
  245. <p>See also the <a href="../../api/Rule.html">Rule guide</a>.
  246. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Rule.js.html">Rule.js</a>.
  247. </p>
  248. <!-- ============================== constructor summary ==================== -->
  249. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Rule.">
  250. <caption>Class Summary</caption>
  251. <thead>
  252. <tr>
  253. <th scope="col">Constructor Attributes</th>
  254. <th scope="col">Constructor Name and Description</th>
  255. </tr>
  256. </thead>
  257. <tbody>
  258. <tr>
  259. <td class="attributes">&nbsp;</td>
  260. <td class="nameDescription" >
  261. <div class="fixedFont">
  262. <b><a href="../symbols/pv.Rule.html#constructor">pv.Rule</a></b>()
  263. </div>
  264. <div class="description">Constructs a new rule with default properties.</div>
  265. </td>
  266. </tr>
  267. </tbody>
  268. </table>
  269. <!-- ============================== properties summary ===================== -->
  270. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Rule.">
  271. <caption>Field Summary</caption>
  272. <thead>
  273. <tr>
  274. <th scope="col">Field Attributes</th>
  275. <th scope="col">Field Name and Description</th>
  276. </tr>
  277. </thead>
  278. <tbody>
  279. <tr>
  280. <td class="attributes">&nbsp;</td>
  281. <td class="nameDescription">
  282. <div class="fixedFont">
  283. <b><a href="../symbols/pv.Rule.html#defaults">defaults</a></b>
  284. </div>
  285. <div class="description">Default properties for rules.</div>
  286. </td>
  287. </tr>
  288. <tr>
  289. <td class="attributes">&nbsp;</td>
  290. <td class="nameDescription">
  291. <div class="fixedFont">
  292. <b><a href="../symbols/pv.Rule.html#height">height</a></b>
  293. </div>
  294. <div class="description">The height of the rule, in pixels.</div>
  295. </td>
  296. </tr>
  297. <tr>
  298. <td class="attributes">&nbsp;</td>
  299. <td class="nameDescription">
  300. <div class="fixedFont">
  301. <b><a href="../symbols/pv.Rule.html#lineWidth">lineWidth</a></b>
  302. </div>
  303. <div class="description">The width of stroked lines, in pixels; used in conjunction with
  304. <tt>strokeStyle</tt> to stroke the rule.</div>
  305. </td>
  306. </tr>
  307. <tr>
  308. <td class="attributes">&nbsp;</td>
  309. <td class="nameDescription">
  310. <div class="fixedFont">
  311. <b><a href="../symbols/pv.Rule.html#strokeStyle">strokeStyle</a></b>
  312. </div>
  313. <div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  314. stroke the rule.</div>
  315. </td>
  316. </tr>
  317. <tr>
  318. <td class="attributes">&nbsp;</td>
  319. <td class="nameDescription">
  320. <div class="fixedFont">
  321. <b><a href="../symbols/pv.Rule.html#width">width</a></b>
  322. </div>
  323. <div class="description">The width of the rule, in pixels.</div>
  324. </td>
  325. </tr>
  326. </tbody>
  327. </table>
  328. <dl class="inheritsList">
  329. <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>
  330. </dl>
  331. <!-- ============================== methods summary ======================== -->
  332. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Rule.">
  333. <caption>Method Summary</caption>
  334. <thead>
  335. <tr>
  336. <th scope="col">Method Attributes</th>
  337. <th scope="col">Method Name and Description</th>
  338. </tr>
  339. </thead>
  340. <tbody>
  341. <tr>
  342. <td class="attributes">&nbsp;</td>
  343. <td class="nameDescription">
  344. <div class="fixedFont"><b><a href="../symbols/pv.Rule.html#anchor">anchor</a></b>(name)
  345. </div>
  346. <div class="description">Constructs a new rule anchor with default properties.</div>
  347. </td>
  348. </tr>
  349. </tbody>
  350. </table>
  351. <dl class="inheritsList">
  352. <dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#add">add</a>, <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>
  353. </dl>
  354. <!-- ============================== events summary ======================== -->
  355. <!-- ============================== constructor details ==================== -->
  356. <div class="details"><a name="constructor"> </a>
  357. <div class="sectionTitle">
  358. Class Detail
  359. </div>
  360. <div class="fixedFont">
  361. <b>pv.Rule</b>()
  362. </div>
  363. <div class="description">
  364. Constructs a new rule with default properties. Rules are not typically
  365. constructed directly, but by adding to a panel or an existing mark via
  366. <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  367. </div>
  368. <dl class="detailList">
  369. <dt class="heading">See:</dt>
  370. <dd><a href="../symbols/pv.Line.html">pv.Line</a></dd>
  371. </dl>
  372. </div>
  373. <!-- ============================== field details ========================== -->
  374. <div class="sectionTitle">
  375. Field Detail
  376. </div>
  377. <a name="defaults"> </a>
  378. <div class="fixedFont">
  379. <span class="light">{<a href="../symbols/pv.Rule.html">pv.Rule</a>}</span>
  380. <b>defaults</b>
  381. </div>
  382. <div class="description">
  383. Default properties for rules. By default, a single-pixel black line is
  384. stroked.
  385. </div>
  386. <hr />
  387. <a name="height"> </a>
  388. <div class="fixedFont">
  389. <span class="light">{number}</span>
  390. <b>height</b>
  391. </div>
  392. <div class="description">
  393. The height of the rule, in pixels. If the bottom position is specified, the
  394. rule extends upward from the bottom edge; if the top position is specified,
  395. the rule extends downward from the top edge.
  396. </div>
  397. <hr />
  398. <a name="lineWidth"> </a>
  399. <div class="fixedFont">
  400. <span class="light">{number}</span>
  401. <b>lineWidth</b>
  402. </div>
  403. <div class="description">
  404. The width of stroked lines, in pixels; used in conjunction with
  405. <tt>strokeStyle</tt> to stroke the rule. The default value is 1 pixel.
  406. </div>
  407. <hr />
  408. <a name="strokeStyle"> </a>
  409. <div class="fixedFont">
  410. <span class="light">{string}</span>
  411. <b>strokeStyle</b>
  412. </div>
  413. <div class="description">
  414. The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  415. stroke the rule. The default value of this property is black.
  416. </div>
  417. <dl class="detailList">
  418. <dt class="heading">See:</dt>
  419. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  420. </dl>
  421. <hr />
  422. <a name="width"> </a>
  423. <div class="fixedFont">
  424. <span class="light">{number}</span>
  425. <b>width</b>
  426. </div>
  427. <div class="description">
  428. The width of the rule, in pixels. If the left position is specified, the rule
  429. extends rightward from the left edge; if the right position is specified, the
  430. rule extends leftward from the right edge.
  431. </div>
  432. <!-- ============================== method details ========================= -->
  433. <div class="sectionTitle">
  434. Method Detail
  435. </div>
  436. <a name="anchor"> </a>
  437. <div class="fixedFont">
  438. <span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
  439. <b>anchor</b>(name)
  440. </div>
  441. <div class="description">
  442. Constructs a new rule anchor with default properties. Rules support five
  443. different anchors:<ul>
  444. <li>top
  445. <li>left
  446. <li>center
  447. <li>bottom
  448. <li>right
  449. </ul>In addition to positioning properties (left, right, top bottom), the
  450. anchors support text rendering properties (text-align, text-baseline). Text is
  451. rendered to appear outside the rule. Note that this behavior is different
  452. from other mark anchors, which default to rendering text <i>inside</i> the
  453. mark.
  454. <p>For consistency with the other mark types, the anchor positions are
  455. defined in terms of their opposite edge. For example, the top anchor defines
  456. the bottom property, such that a bar added to the top anchor grows upward.
  457. </div>
  458. <dl class="detailList">
  459. <dt class="heading">Parameters:</dt>
  460. <dt>
  461. <span class="light fixedFont">{string}</span> <b>name</b>
  462. </dt>
  463. <dd>the anchor name; either a string or a property function.</dd>
  464. </dl>
  465. <dl class="detailList">
  466. <dt class="heading">Returns:</dt>
  467. <dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> </dd>
  468. </dl>
  469. <!-- ============================== event details ========================= -->
  470. <hr />
  471. </div>
  472. <!-- ============================== footer ================================= -->
  473. <div class="fineprint" style="clear:both">
  474. 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)
  475. </div>
  476. </body>
  477. </html>