pv.Dot.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819
  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.Dot</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.Dot
  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 dot; a dot is simply a sized glyph centered at a given
  216. point that can also be stroked and filled. The <tt>size</tt> property is
  217. proportional to the area of the rendered glyph to encourage meaningful visual
  218. encodings. Dots can visually encode up to eight dimensions of data, though
  219. this may be unwise due to integrality. See <a href="../symbols/pv.Mark.html">pv.Mark</a> for details on the
  220. prioritization of redundant positioning properties.
  221. <p>See also the <a href="../../api/Dot.html">Dot guide</a>.
  222. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Dot.js.html">Dot.js</a>.
  223. </p>
  224. <!-- ============================== constructor summary ==================== -->
  225. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Dot.">
  226. <caption>Class Summary</caption>
  227. <thead>
  228. <tr>
  229. <th scope="col">Constructor Attributes</th>
  230. <th scope="col">Constructor Name and Description</th>
  231. </tr>
  232. </thead>
  233. <tbody>
  234. <tr>
  235. <td class="attributes">&nbsp;</td>
  236. <td class="nameDescription" >
  237. <div class="fixedFont">
  238. <b><a href="../symbols/pv.Dot.html#constructor">pv.Dot</a></b>()
  239. </div>
  240. <div class="description">Constructs a new dot mark with default properties.</div>
  241. </td>
  242. </tr>
  243. </tbody>
  244. </table>
  245. <!-- ============================== properties summary ===================== -->
  246. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Dot.">
  247. <caption>Field Summary</caption>
  248. <thead>
  249. <tr>
  250. <th scope="col">Field Attributes</th>
  251. <th scope="col">Field Name and Description</th>
  252. </tr>
  253. </thead>
  254. <tbody>
  255. <tr>
  256. <td class="attributes">&nbsp;</td>
  257. <td class="nameDescription">
  258. <div class="fixedFont">
  259. <b><a href="../symbols/pv.Dot.html#angle">angle</a></b>
  260. </div>
  261. <div class="description">The rotation angle, in radians.</div>
  262. </td>
  263. </tr>
  264. <tr>
  265. <td class="attributes">&nbsp;</td>
  266. <td class="nameDescription">
  267. <div class="fixedFont">
  268. <b><a href="../symbols/pv.Dot.html#defaults">defaults</a></b>
  269. </div>
  270. <div class="description">Default properties for dots.</div>
  271. </td>
  272. </tr>
  273. <tr>
  274. <td class="attributes">&nbsp;</td>
  275. <td class="nameDescription">
  276. <div class="fixedFont">
  277. <b><a href="../symbols/pv.Dot.html#fillStyle">fillStyle</a></b>
  278. </div>
  279. <div class="description">The fill style; if non-null, the interior of the dot is filled with the
  280. specified color.</div>
  281. </td>
  282. </tr>
  283. <tr>
  284. <td class="attributes">&nbsp;</td>
  285. <td class="nameDescription">
  286. <div class="fixedFont">
  287. <b><a href="../symbols/pv.Dot.html#lineWidth">lineWidth</a></b>
  288. </div>
  289. <div class="description">The width of stroked lines, in pixels; used in conjunction with
  290. <tt>strokeStyle</tt> to stroke the dot's shape.</div>
  291. </td>
  292. </tr>
  293. <tr>
  294. <td class="attributes">&nbsp;</td>
  295. <td class="nameDescription">
  296. <div class="fixedFont">
  297. <b><a href="../symbols/pv.Dot.html#shape">shape</a></b>
  298. </div>
  299. <div class="description">The shape name.</div>
  300. </td>
  301. </tr>
  302. <tr>
  303. <td class="attributes">&nbsp;</td>
  304. <td class="nameDescription">
  305. <div class="fixedFont">
  306. <b><a href="../symbols/pv.Dot.html#size">size</a></b>
  307. </div>
  308. <div class="description">The size of the dot, in square pixels.</div>
  309. </td>
  310. </tr>
  311. <tr>
  312. <td class="attributes">&nbsp;</td>
  313. <td class="nameDescription">
  314. <div class="fixedFont">
  315. <b><a href="../symbols/pv.Dot.html#strokeStyle">strokeStyle</a></b>
  316. </div>
  317. <div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  318. stroke the dot's shape.</div>
  319. </td>
  320. </tr>
  321. </tbody>
  322. </table>
  323. <dl class="inheritsList">
  324. <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>
  325. </dl>
  326. <!-- ============================== methods summary ======================== -->
  327. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Dot.">
  328. <caption>Method Summary</caption>
  329. <thead>
  330. <tr>
  331. <th scope="col">Method Attributes</th>
  332. <th scope="col">Method Name and Description</th>
  333. </tr>
  334. </thead>
  335. <tbody>
  336. <tr>
  337. <td class="attributes">&nbsp;</td>
  338. <td class="nameDescription">
  339. <div class="fixedFont"><b><a href="../symbols/pv.Dot.html#anchor">anchor</a></b>(name)
  340. </div>
  341. <div class="description">Constructs a new dot anchor with default properties.</div>
  342. </td>
  343. </tr>
  344. <tr>
  345. <td class="attributes">&nbsp;</td>
  346. <td class="nameDescription">
  347. <div class="fixedFont"><b><a href="../symbols/pv.Dot.html#radius">radius</a></b>()
  348. </div>
  349. <div class="description">Returns the radius of the dot, which is defined to be the square root of the
  350. <a href="#size">#size</a> property.</div>
  351. </td>
  352. </tr>
  353. </tbody>
  354. </table>
  355. <dl class="inheritsList">
  356. <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>
  357. </dl>
  358. <!-- ============================== events summary ======================== -->
  359. <!-- ============================== constructor details ==================== -->
  360. <div class="details"><a name="constructor"> </a>
  361. <div class="sectionTitle">
  362. Class Detail
  363. </div>
  364. <div class="fixedFont">
  365. <b>pv.Dot</b>()
  366. </div>
  367. <div class="description">
  368. Constructs a new dot mark with default properties. Dots are not typically
  369. constructed directly, but by adding to a panel or an existing mark via
  370. <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  371. </div>
  372. </div>
  373. <!-- ============================== field details ========================== -->
  374. <div class="sectionTitle">
  375. Field Detail
  376. </div>
  377. <a name="angle"> </a>
  378. <div class="fixedFont">
  379. <span class="light">{number}</span>
  380. <b>angle</b>
  381. </div>
  382. <div class="description">
  383. The rotation angle, in radians. Used to rotate shapes, such as to turn a
  384. cross into a plus.
  385. </div>
  386. <hr />
  387. <a name="defaults"> </a>
  388. <div class="fixedFont">
  389. <span class="light">{<a href="../symbols/pv.Dot.html">pv.Dot</a>}</span>
  390. <b>defaults</b>
  391. </div>
  392. <div class="description">
  393. Default properties for dots. By default, there is no fill and the stroke
  394. style is a categorical color. The default shape is "circle" with size 20.
  395. </div>
  396. <hr />
  397. <a name="fillStyle"> </a>
  398. <div class="fixedFont">
  399. <span class="light">{string}</span>
  400. <b>fillStyle</b>
  401. </div>
  402. <div class="description">
  403. The fill style; if non-null, the interior of the dot is filled with the
  404. specified color. The default value of this property is null, meaning dots are
  405. not filled by default.
  406. </div>
  407. <dl class="detailList">
  408. <dt class="heading">See:</dt>
  409. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  410. </dl>
  411. <hr />
  412. <a name="lineWidth"> </a>
  413. <div class="fixedFont">
  414. <span class="light">{number}</span>
  415. <b>lineWidth</b>
  416. </div>
  417. <div class="description">
  418. The width of stroked lines, in pixels; used in conjunction with
  419. <tt>strokeStyle</tt> to stroke the dot's shape.
  420. </div>
  421. <hr />
  422. <a name="shape"> </a>
  423. <div class="fixedFont">
  424. <span class="light">{string}</span>
  425. <b>shape</b>
  426. </div>
  427. <div class="description">
  428. The shape name. Several shapes are supported:<ul>
  429. <li>cross
  430. <li>triangle
  431. <li>diamond
  432. <li>square
  433. <li>tick
  434. <li>circle
  435. </ul>These shapes can be further changed using the <a href="#angle">#angle</a> property;
  436. for instance, a cross can be turned into a plus by rotating. Similarly, the
  437. tick, which is vertical by default, can be rotated horizontally. Note that
  438. some shapes (cross and tick) do not have interior areas, and thus do not
  439. support fill style meaningfully.
  440. <p>Note: it may be more natural to use the <a href="../symbols/pv.Rule.html">pv.Rule</a> mark for
  441. horizontal and vertical ticks. The tick shape is only necessary if angled
  442. ticks are needed.
  443. </div>
  444. <hr />
  445. <a name="size"> </a>
  446. <div class="fixedFont">
  447. <span class="light">{number}</span>
  448. <b>size</b>
  449. </div>
  450. <div class="description">
  451. The size of the dot, in square pixels. Square pixels are used such that the
  452. area of the dot is linearly proportional to the value of the size property,
  453. facilitating representative encodings.
  454. </div>
  455. <dl class="detailList">
  456. <dt class="heading">See:</dt>
  457. <dd><a href="#radius">#radius</a></dd>
  458. </dl>
  459. <hr />
  460. <a name="strokeStyle"> </a>
  461. <div class="fixedFont">
  462. <span class="light">{string}</span>
  463. <b>strokeStyle</b>
  464. </div>
  465. <div class="description">
  466. The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  467. stroke the dot's shape. The default value of this property is a categorical
  468. color.
  469. </div>
  470. <dl class="detailList">
  471. <dt class="heading">See:</dt>
  472. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  473. </dl>
  474. <!-- ============================== method details ========================= -->
  475. <div class="sectionTitle">
  476. Method Detail
  477. </div>
  478. <a name="anchor"> </a>
  479. <div class="fixedFont">
  480. <span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
  481. <b>anchor</b>(name)
  482. </div>
  483. <div class="description">
  484. Constructs a new dot anchor with default properties. Dots support five
  485. different anchors:<ul>
  486. <li>top
  487. <li>left
  488. <li>center
  489. <li>bottom
  490. <li>right
  491. </ul>In addition to positioning properties (left, right, top bottom), the
  492. anchors support text rendering properties (text-align, text-baseline). Text is
  493. rendered to appear outside the dot. Note that this behavior is different from
  494. other mark anchors, which default to rendering text <i>inside</i> the mark.
  495. <p>For consistency with the other mark types, the anchor positions are
  496. defined in terms of their opposite edge. For example, the top anchor defines
  497. the bottom property, such that a bar added to the top anchor grows upward.
  498. </div>
  499. <dl class="detailList">
  500. <dt class="heading">Parameters:</dt>
  501. <dt>
  502. <span class="light fixedFont">{string}</span> <b>name</b>
  503. </dt>
  504. <dd>the anchor name; either a string or a property function.</dd>
  505. </dl>
  506. <dl class="detailList">
  507. <dt class="heading">Returns:</dt>
  508. <dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> </dd>
  509. </dl>
  510. <hr />
  511. <a name="radius"> </a>
  512. <div class="fixedFont">
  513. <span class="light">{number}</span>
  514. <b>radius</b>()
  515. </div>
  516. <div class="description">
  517. Returns the radius of the dot, which is defined to be the square root of the
  518. <a href="#size">#size</a> property.
  519. </div>
  520. <dl class="detailList">
  521. <dt class="heading">Returns:</dt>
  522. <dd><span class="light fixedFont">{number}</span> the radius.</dd>
  523. </dl>
  524. <!-- ============================== event details ========================= -->
  525. <hr />
  526. </div>
  527. <!-- ============================== footer ================================= -->
  528. <div class="fineprint" style="clear:both">
  529. 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)
  530. </div>
  531. </body>
  532. </html>