pv.Line.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  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.Line</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.Line
  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 series of connected line segments, or <i>polyline</i>,
  216. that can be stroked with a configurable color and thickness. Each
  217. articulation point in the line corresponds to a datum; for <i>n</i> points,
  218. <i>n</i>-1 connected line segments are drawn. The point is positioned using
  219. the box model. Arbitrary paths are also possible, allowing radar plots and
  220. other custom visualizations.
  221. <p>Like areas, lines can be stroked and filled with arbitrary colors. In most
  222. cases, lines are only stroked, but the fill style can be used to construct
  223. arbitrary polygons.
  224. <p>See also the <a href="../../api/Line.html">Line guide</a>.
  225. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Line.js.html">Line.js</a>.
  226. </p>
  227. <!-- ============================== constructor summary ==================== -->
  228. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Line.">
  229. <caption>Class Summary</caption>
  230. <thead>
  231. <tr>
  232. <th scope="col">Constructor Attributes</th>
  233. <th scope="col">Constructor Name and Description</th>
  234. </tr>
  235. </thead>
  236. <tbody>
  237. <tr>
  238. <td class="attributes">&nbsp;</td>
  239. <td class="nameDescription" >
  240. <div class="fixedFont">
  241. <b><a href="../symbols/pv.Line.html#constructor">pv.Line</a></b>()
  242. </div>
  243. <div class="description">Constructs a new line mark with default properties.</div>
  244. </td>
  245. </tr>
  246. </tbody>
  247. </table>
  248. <!-- ============================== properties summary ===================== -->
  249. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Line.">
  250. <caption>Field Summary</caption>
  251. <thead>
  252. <tr>
  253. <th scope="col">Field Attributes</th>
  254. <th scope="col">Field 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.Line.html#defaults">defaults</a></b>
  263. </div>
  264. <div class="description">Default properties for lines.</div>
  265. </td>
  266. </tr>
  267. <tr>
  268. <td class="attributes">&nbsp;</td>
  269. <td class="nameDescription">
  270. <div class="fixedFont">
  271. <b><a href="../symbols/pv.Line.html#fillStyle">fillStyle</a></b>
  272. </div>
  273. <div class="description">The line fill style; if non-null, the interior of the line is closed and
  274. filled with the specified color.</div>
  275. </td>
  276. </tr>
  277. <tr>
  278. <td class="attributes">&nbsp;</td>
  279. <td class="nameDescription">
  280. <div class="fixedFont">
  281. <b><a href="../symbols/pv.Line.html#interpolate">interpolate</a></b>
  282. </div>
  283. <div class="description">How to interpolate between values.</div>
  284. </td>
  285. </tr>
  286. <tr>
  287. <td class="attributes">&nbsp;</td>
  288. <td class="nameDescription">
  289. <div class="fixedFont">
  290. <b><a href="../symbols/pv.Line.html#lineWidth">lineWidth</a></b>
  291. </div>
  292. <div class="description">The width of stroked lines, in pixels; used in conjunction with
  293. <tt>strokeStyle</tt> to stroke the line.</div>
  294. </td>
  295. </tr>
  296. <tr>
  297. <td class="attributes">&nbsp;</td>
  298. <td class="nameDescription">
  299. <div class="fixedFont">
  300. <b><a href="../symbols/pv.Line.html#segmented">segmented</a></b>
  301. </div>
  302. <div class="description">Whether the line is segmented; whether variations in stroke style, line width
  303. and the other properties are treated as fixed.</div>
  304. </td>
  305. </tr>
  306. <tr>
  307. <td class="attributes">&nbsp;</td>
  308. <td class="nameDescription">
  309. <div class="fixedFont">
  310. <b><a href="../symbols/pv.Line.html#strokeStyle">strokeStyle</a></b>
  311. </div>
  312. <div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  313. stroke the line.</div>
  314. </td>
  315. </tr>
  316. </tbody>
  317. </table>
  318. <dl class="inheritsList">
  319. <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>
  320. </dl>
  321. <!-- ============================== methods summary ======================== -->
  322. <dl class="inheritsList">
  323. <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#anchor">anchor</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>
  324. </dl>
  325. <!-- ============================== events summary ======================== -->
  326. <!-- ============================== constructor details ==================== -->
  327. <div class="details"><a name="constructor"> </a>
  328. <div class="sectionTitle">
  329. Class Detail
  330. </div>
  331. <div class="fixedFont">
  332. <b>pv.Line</b>()
  333. </div>
  334. <div class="description">
  335. Constructs a new line mark with default properties. Lines are not typically
  336. constructed directly, but by adding to a panel or an existing mark via
  337. <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  338. </div>
  339. </div>
  340. <!-- ============================== field details ========================== -->
  341. <div class="sectionTitle">
  342. Field Detail
  343. </div>
  344. <a name="defaults"> </a>
  345. <div class="fixedFont">
  346. <span class="light">{<a href="../symbols/pv.Line.html">pv.Line</a>}</span>
  347. <b>defaults</b>
  348. </div>
  349. <div class="description">
  350. Default properties for lines. By default, there is no fill and the stroke
  351. style is a categorical color. The default interpolation is linear.
  352. </div>
  353. <hr />
  354. <a name="fillStyle"> </a>
  355. <div class="fixedFont">
  356. <span class="light">{string}</span>
  357. <b>fillStyle</b>
  358. </div>
  359. <div class="description">
  360. The line fill style; if non-null, the interior of the line is closed and
  361. filled with the specified color. The default value of this property is a
  362. null, meaning that lines are not filled by default.
  363. </div>
  364. <dl class="detailList">
  365. <dt class="heading">See:</dt>
  366. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  367. </dl>
  368. <hr />
  369. <a name="interpolate"> </a>
  370. <div class="fixedFont">
  371. <span class="light">{string}</span>
  372. <b>interpolate</b>
  373. </div>
  374. <div class="description">
  375. How to interpolate between values. Linear interpolation ("linear") is the
  376. default, producing a straight line between points. For piecewise constant
  377. functions (i.e., step functions), either "step-before" or "step-after" can be
  378. specified.
  379. <p>Note: this property is currently supported only on non-segmented lines.
  380. <p>This property is <i>fixed</i>. See <a href="../symbols/pv.Mark.html">pv.Mark</a>.
  381. </div>
  382. <hr />
  383. <a name="lineWidth"> </a>
  384. <div class="fixedFont">
  385. <span class="light">{number}</span>
  386. <b>lineWidth</b>
  387. </div>
  388. <div class="description">
  389. The width of stroked lines, in pixels; used in conjunction with
  390. <tt>strokeStyle</tt> to stroke the line.
  391. </div>
  392. <hr />
  393. <a name="segmented"> </a>
  394. <div class="fixedFont">
  395. <span class="light">{boolean}</span>
  396. <b>segmented</b>
  397. </div>
  398. <div class="description">
  399. Whether the line is segmented; whether variations in stroke style, line width
  400. and the other properties are treated as fixed. Rendering segmented lines is
  401. noticeably slower than non-segmented lines.
  402. <p>This property is <i>fixed</i>. See <a href="../symbols/pv.Mark.html">pv.Mark</a>.
  403. </div>
  404. <hr />
  405. <a name="strokeStyle"> </a>
  406. <div class="fixedFont">
  407. <span class="light">{string}</span>
  408. <b>strokeStyle</b>
  409. </div>
  410. <div class="description">
  411. The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  412. stroke the line. The default value of this property is a categorical color.
  413. </div>
  414. <dl class="detailList">
  415. <dt class="heading">See:</dt>
  416. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  417. </dl>
  418. <!-- ============================== method details ========================= -->
  419. <!-- ============================== event details ========================= -->
  420. <hr />
  421. </div>
  422. <!-- ============================== footer ================================= -->
  423. <div class="fineprint" style="clear:both">
  424. 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)
  425. </div>
  426. </body>
  427. </html>