| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="generator" content="JsDoc Toolkit" />
-
- <title>JsDoc Reference - pv.Mark</title>
- <style type="text/css">
- /* default.css */
- body
- {
- font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
- width: 800px;
- }
- .header
- {
- clear: both;
- background-color: #ccc;
- padding: 8px;
- }
- h1
- {
- font-size: 150%;
- font-weight: bold;
- padding: 0;
- margin: 1em 0 0 .3em;
- }
- hr
- {
- border: none 0;
- border-top: 1px solid #7F8FB1;
- height: 1px;
- }
- pre.code
- {
- display: block;
- padding: 8px;
- border: 1px dashed #ccc;
- }
- #index
- {
- margin-top: 24px;
- float: left;
- width: 160px;
- position: absolute;
- left: 8px;
- background-color: #F3F3F3;
- padding: 8px;
- }
- #content
- {
- margin-left: 190px;
- width: 600px;
- }
- .classList
- {
- list-style-type: none;
- padding: 0;
- margin: 0 0 0 8px;
- font-family: arial, sans-serif;
- font-size: 1em;
- overflow: auto;
- }
- .classList li
- {
- padding: 0;
- margin: 0 0 8px 0;
- }
- .summaryTable { width: 100%; }
- h1.classTitle
- {
- font-size:170%;
- line-height:130%;
- }
- h2 { font-size: 110%; }
- caption, div.sectionTitle
- {
- background-color: #7F8FB1;
- color: #fff;
- font-size:130%;
- text-align: left;
- padding: 2px 6px 2px 6px;
- border: 1px #7F8FB1 solid;
- }
- div.sectionTitle { margin-bottom: 8px; }
- .summaryTable thead { display: none; }
- .summaryTable td
- {
- vertical-align: top;
- padding: 4px;
- border-bottom: 1px #7F8FB1 solid;
- border-right: 1px #7F8FB1 solid;
- }
- /*col#summaryAttributes {}*/
- .summaryTable td.attributes
- {
- border-left: 1px #7F8FB1 solid;
- width: 140px;
- text-align: right;
- }
- td.attributes, .fixedFont
- {
- line-height: 15px;
- color: #002EBE;
- font-family: "Courier New",Courier,monospace;
- font-size: 13px;
- }
- .summaryTable td.nameDescription
- {
- text-align: left;
- font-size: 13px;
- line-height: 15px;
- }
- .summaryTable td.nameDescription, .description
- {
- line-height: 15px;
- padding: 4px;
- padding-left: 4px;
- }
- pre
- {
- border-left: solid 10px #ddd;
- padding-left: 1.5em;
- }
- .summaryTable { margin-bottom: 8px; }
- ul.inheritsList
- {
- list-style: square;
- margin-left: 20px;
- padding-left: 0;
- }
- .detailList {
- margin-left: 20px;
- line-height: 15px;
- }
- .detailList dt { margin-left: 20px; }
- .detailList .heading
- {
- font-weight: bold;
- padding-bottom: 6px;
- margin-left: 0;
- }
- .light, td.attributes, .light a:link, .light a:visited
- {
- color: #777;
- font-style: italic;
- }
- .fineprint
- {
- text-align: right;
- font-size: 10px;
- }
- </style>
- </head>
- <body>
- <!-- ============================== header ================================= -->
- <!-- begin static/header.html -->
- <div id="header">
- </div>
- <!-- end static/header.html -->
- <!-- ============================== classes index ============================ -->
- <div id="index">
- <!-- begin publish.classesIndex -->
- <div align="center"><a href="../index.html">Class Index</a>
- | <a href="../files.html">File Index</a></div>
- <hr />
- <h2>Classes</h2>
- <ul class="classList">
-
- <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
-
- <li><a href="../symbols/Array.html">Array</a></li>
-
- <li><a href="../symbols/Date.html">Date</a></li>
-
- <li><a href="../symbols/pv.html">pv</a></li>
-
- <li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
-
- <li><a href="../symbols/pv.Area.html">pv.Area</a></li>
-
- <li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
-
- <li><a href="../symbols/pv.Color.html">pv.Color</a></li>
-
- <li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
-
- <li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
-
- <li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
-
- <li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
-
- <li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
-
- <li><a href="../symbols/pv.Image.html">pv.Image</a></li>
-
- <li><a href="../symbols/pv.Label.html">pv.Label</a></li>
-
- <li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
-
- <li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
-
- <li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
-
- <li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
-
- <li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
-
- <li><a href="../symbols/pv.Line.html">pv.Line</a></li>
-
- <li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
-
- <li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
-
- <li><a href="../symbols/pv.ns.html">pv.ns</a></li>
-
- <li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
-
- <li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
-
- <li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
-
- <li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
-
- <li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
-
- <li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
-
- <li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
-
- <li><a href="../symbols/pv.version.html">pv.version</a></li>
-
- <li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
-
- </ul>
- <hr />
- <!-- end publish.classesIndex -->
- </div>
-
- <div id="content">
- <!-- ============================== class title ============================ -->
- <h1 class="classTitle">
-
- Class pv.Mark
- </h1>
- <!-- ============================== class summary ========================== -->
- <p class="description">
-
-
- Represents a data-driven graphical mark. The <tt>Mark</tt> class is
- the base class for all graphical marks in Protovis; it does not provide any
- specific rendering functionality, but together with Panel establishes
- the core framework.
- <p>Concrete mark types include familiar visual elements such as bars, lines
- and labels. Although a bar mark may be used to construct a bar chart, marks
- know nothing about charts; it is only through their specification and
- composition that charts are produced. These building blocks permit many
- combinatorial possibilities.
- <p>Marks are associated with <b>data</b>: a mark is generated once per
- associated datum, mapping the datum to visual <b>properties</b> such as
- position and color. Thus, a single mark specification represents a set of
- visual elements that share the same data and visual encoding. The type of
- mark defines the names of properties and their meaning. A property may be
- static, ignoring the associated datum and returning a constant; or, it may be
- dynamic, derived from the associated datum or index. Such dynamic encodings
- can be specified succinctly using anonymous functions. Special properties
- called event handlers can be registered to add interactivity.
- <p>Protovis uses <b>inheritance</b> to simplify the specification of related
- marks: a new mark can be derived from an existing mark, inheriting its
- properties. The new mark can then override properties to specify new
- behavior, potentially in terms of the old behavior. In this way, the old mark
- serves as the <b>prototype</b> for the new mark. Most mark types share the
- same basic properties for consistency and to facilitate inheritance.
- <p>The prioritization of redundant properties is as follows:<ol>
- <li>If the <tt>width</tt> property is not specified (i.e., null), its value
- is the width of the parent panel, minus this mark's left and right margins;
- the left and right margins are zero if not specified.
- <li>Otherwise, if the <tt>right</tt> margin is not specified, its value is
- the width of the parent panel, minus this mark's width and left margin; the
- left margin is zero if not specified.
- <li>Otherwise, if the <tt>left</tt> property is not specified, its value is
- the width of the parent panel, minus this mark's width and the right margin.
- </ol>This prioritization is then duplicated for the <tt>height</tt>,
- <tt>bottom</tt> and <tt>top</tt> properties, respectively.
- <p>While most properties are <i>variable</i>, some mark types, such as lines
- and areas, generate a single visual element rather than a distinct visual
- element per datum. With these marks, some properties may be <b>fixed</b>.
- Fixed properties can vary per mark, but not <i>per datum</i>! These
- properties are evaluated solely for the first (0-index) datum, and typically
- are specified as a constant. However, it is valid to use a function if the
- property varies between panels or is dynamically generated.
- <p>See also the <a href="../../api/">Protovis guide</a>.
-
-
- <br /><i>Defined in: </i> <a href="../symbols/src/mark_Mark.js.html">Mark.js</a>.
-
- </p>
- <!-- ============================== constructor summary ==================== -->
-
- <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Mark.">
- <caption>Class Summary</caption>
- <thead>
- <tr>
- <th scope="col">Constructor Attributes</th>
- <th scope="col">Constructor Name and Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription" >
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#constructor">pv.Mark</a></b>()
- </div>
- <div class="description">Constructs a new mark with default properties.</div>
- </td>
- </tr>
- </tbody>
- </table>
-
- <!-- ============================== properties summary ===================== -->
-
-
-
- <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Mark.">
- <caption>Field Summary</caption>
- <thead>
- <tr>
- <th scope="col">Field Attributes</th>
- <th scope="col">Field Name and Description</th>
- </tr>
- </thead>
- <tbody>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#bottom">bottom</a></b>
- </div>
- <div class="description">The bottom margin; the distance, in pixels, between the bottom edge of the
- enclosing panel and the bottom edge of this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#childIndex">childIndex</a></b>
- </div>
- <div class="description">The child index.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#cursor">cursor</a></b>
- </div>
- <div class="description">The cursor property; corresponds to the CSS cursor property.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#data">data</a></b>
- </div>
- <div class="description">The data property; an array of objects.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#defaults">defaults</a></b>
- </div>
- <div class="description">Default properties for all mark types.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#index">index</a></b>
- </div>
- <div class="description">The mark index.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#left">left</a></b>
- </div>
- <div class="description">The left margin; the distance, in pixels, between the left edge of the
- enclosing panel and the left edge of this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#parent">parent</a></b>
- </div>
- <div class="description">The enclosing parent panel.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#proto">proto</a></b>
- </div>
- <div class="description">The mark prototype, possibly undefined, from which to inherit property
- functions.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#reverse">reverse</a></b>
- </div>
- <div class="description">The reverse property; a boolean determining whether marks are ordered from
- front-to-back or back-to-front.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#right">right</a></b>
- </div>
- <div class="description">The right margin; the distance, in pixels, between the right edge of the
- enclosing panel and the right edge of this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#root">root</a></b>
- </div>
- <div class="description">The root parent panel.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#scene">scene</a></b>
- </div>
- <div class="description">The scene graph.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#title">title</a></b>
- </div>
- <div class="description">The title property; corresponds to the HTML/SVG title property, allowing the
- general of simple plain text tooltips.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#top">top</a></b>
- </div>
- <div class="description">The top margin; the distance, in pixels, between the top edge of the
- enclosing panel and the top edge of this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#type">type</a></b>
- </div>
- <div class="description">The mark type; a lower camelCase name.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont">
- <b><a href="../symbols/pv.Mark.html#visible">visible</a></b>
- </div>
- <div class="description">The visible property; a boolean determining whether or not the mark instance
- is visible.</div>
- </td>
- </tr>
-
- </tbody>
- </table>
-
-
-
-
- <!-- ============================== methods summary ======================== -->
-
-
-
- <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Mark.">
- <caption>Method Summary</caption>
- <thead>
- <tr>
- <th scope="col">Method Attributes</th>
- <th scope="col">Method Name and Description</th>
- </tr>
- </thead>
- <tbody>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#add">add</a></b>(type)
- </div>
- <div class="description">Adds a new mark of the specified type to the enclosing parent panel, whilst
- simultaneously setting the prototype of the new mark to be this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#anchor">anchor</a></b>(name)
- </div>
- <div class="description">Returns an anchor with the specified name.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a></b>()
- </div>
- <div class="description">Returns the anchor target of this mark, if it is derived from an anchor;
- otherwise returns null.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#cousin">cousin</a></b>()
- </div>
- <div class="description">Returns the current instance in the scene graph of this mark, in the previous
- instance of the enclosing parent panel.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#def">def</a></b>(name, value)
- </div>
- <div class="description">Defines a local variable on this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#event">event</a></b>(type, handler)
- </div>
- <div class="description">Registers an event handler for the specified event type with this mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#extend">extend</a></b>(proto)
- </div>
- <div class="description">Sets the prototype of this mark to the specified mark.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#first">first</a></b>()
- </div>
- <div class="description">Returns the first instance of this mark in the scene graph.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#last">last</a></b>()
- </div>
- <div class="description">Returns the last instance of this mark in the scene graph.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#mouse">mouse</a></b>()
- </div>
- <div class="description">Returns the current location of the mouse (cursor) relative to this mark's
- parent.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#render">render</a></b>()
- </div>
- <div class="description">Renders this mark, including recursively rendering all child marks if this is
- a panel.</div>
- </td>
- </tr>
-
- <tr>
- <td class="attributes"> </td>
- <td class="nameDescription">
- <div class="fixedFont"><b><a href="../symbols/pv.Mark.html#sibling">sibling</a></b>()
- </div>
- <div class="description">Returns the previous instance of this mark in the scene graph, or null if
- this is the first instance.</div>
- </td>
- </tr>
-
- </tbody>
- </table>
-
-
-
-
- <!-- ============================== events summary ======================== -->
-
- <!-- ============================== constructor details ==================== -->
-
- <div class="details"><a name="constructor"> </a>
- <div class="sectionTitle">
- Class Detail
- </div>
-
- <div class="fixedFont">
- <b>pv.Mark</b>()
- </div>
-
- <div class="description">
- Constructs a new mark with default properties. Marks, with the exception of
- the root panel, are not typically constructed directly; instead, they are
- added to a panel or an existing mark via <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
-
- </div>
-
-
-
-
-
-
-
-
-
-
-
- </div>
-
- <!-- ============================== field details ========================== -->
-
- <div class="sectionTitle">
- Field Detail
- </div>
-
- <a name="bottom"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>bottom</b>
-
- </div>
- <div class="description">
- The bottom margin; the distance, in pixels, between the bottom edge of the
- enclosing panel and the bottom edge of this mark. Note that in some cases
- this property may be redundant with the top property, or with the conjunction
- of top and height.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="childIndex"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>childIndex</b>
-
- </div>
- <div class="description">
- The child index. -1 if the enclosing parent panel is null; otherwise, the
- zero-based index of this mark into the parent panel's <tt>children</tt> array.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="cursor"> </a>
- <div class="fixedFont">
-
- <span class="light">{string}</span>
- <b>cursor</b>
-
- </div>
- <div class="description">
- The cursor property; corresponds to the CSS cursor property. This is
- typically used in conjunction with event handlers to indicate interactivity.
-
-
- </div>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="http://www.w3.org/TR/CSS2/ui.html#propdef-cursor">CSS2 cursor</a></dd>
-
- </dl>
-
-
- <hr />
-
- <a name="data"> </a>
- <div class="fixedFont">
-
- <span class="light">{array}</span>
- <b>data</b>
-
- </div>
- <div class="description">
- The data property; an array of objects. The size of the array determines the
- number of marks that will be instantiated; each element in the array will be
- passed to property functions to compute the property values. Typically, the
- data property is specified as a constant array, such as
- <pre>m.data([1, 2, 3, 4, 5]);</pre>
- However, it is perfectly acceptable to define the data property as a
- function. This function might compute the data dynamically, allowing
- different data to be used per enclosing panel. For instance, in the stacked
- area graph example (see <a href="#scene">#scene</a>), the data function on the area mark
- dereferences each series.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="defaults"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>defaults</b>
-
- </div>
- <div class="description">
- Default properties for all mark types. By default, the data array is the
- parent data as a single-element array; if the data property is not specified,
- this causes each mark to be instantiated as a singleton with the parents
- datum. The visible property is true by default, and the reverse property is
- false.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="index"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>index</b>
-
- </div>
- <div class="description">
- The mark index. The value of this field depends on which instance (i.e.,
- which element of the data array) is currently being evaluated. During the
- build phase, the index is incremented over each datum; when handling events,
- the index is set to the instance that triggered the event.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="left"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>left</b>
-
- </div>
- <div class="description">
- The left margin; the distance, in pixels, between the left edge of the
- enclosing panel and the left edge of this mark. Note that in some cases this
- property may be redundant with the right property, or with the conjunction of
- right and width.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="parent"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
- <b>parent</b>
-
- </div>
- <div class="description">
- The enclosing parent panel. The parent panel is generally undefined only for
- the root panel; however, it is possible to create "offscreen" marks that are
- used only for inheritance purposes.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="proto"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>proto</b>
-
- </div>
- <div class="description">
- The mark prototype, possibly undefined, from which to inherit property
- functions. The mark prototype is not necessarily of the same type as this
- mark. Any properties defined on this mark will override properties inherited
- either from the prototype or from the type-specific defaults.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="reverse"> </a>
- <div class="fixedFont">
-
- <span class="light">{boolean}</span>
- <b>reverse</b>
-
- </div>
- <div class="description">
- The reverse property; a boolean determining whether marks are ordered from
- front-to-back or back-to-front. SVG does not support explicit z-ordering;
- shapes are rendered in the order they appear. Thus, by default, marks are
- rendered in data order. Setting the reverse property to false reverses the
- order in which they are rendered; however, the properties are still evaluated
- (i.e., built) in forward order.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="right"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>right</b>
-
- </div>
- <div class="description">
- The right margin; the distance, in pixels, between the right edge of the
- enclosing panel and the right edge of this mark. Note that in some cases this
- property may be redundant with the left property, or with the conjunction of
- left and width.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="root"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
- <b>root</b>
-
- </div>
- <div class="description">
- The root parent panel. This may be undefined for "offscreen" marks that are
- created for inheritance purposes only.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="scene"> </a>
- <div class="fixedFont">
-
-
- <b>scene</b>
-
- </div>
- <div class="description">
- The scene graph. The scene graph is an array of objects; each object (or
- "node") corresponds to an instance of this mark and an element in the data
- array. The scene graph can be traversed to lookup previously-evaluated
- properties.
- <p>For instance, consider a stacked area chart. The bottom property of the
- area can be defined using the <i>cousin</i> instance, which is the current
- area instance in the previous instantiation of the parent panel. In this
- sample code,
- <pre>new pv.Panel()
- .width(150).height(150)
- .add(pv.Panel)
- .data([[1, 1.2, 1.7, 1.5, 1.7],
- [.5, 1, .8, 1.1, 1.3],
- [.2, .5, .8, .9, 1]])
- .add(pv.Area)
- .data(function(d) d)
- .bottom(function() {
- var c = this.cousin();
- return c ? (c.bottom + c.height) : 0;
- })
- .height(function(d) d * 40)
- .left(function() this.index * 35)
- .root.render();</pre>
- the bottom property is computed based on the upper edge of the corresponding
- datum in the previous series. The area's parent panel is instantiated once
- per series, so the cousin refers to the previous (below) area mark. (Note
- that the position of the upper edge is not the same as the top property,
- which refers to the top margin: the distance from the top edge of the panel
- to the top edge of the mark.)
-
-
- </div>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="#first">#first</a></dd>
-
- <dd><a href="#last">#last</a></dd>
-
- <dd><a href="#sibling">#sibling</a></dd>
-
- <dd><a href="#cousin">#cousin</a></dd>
-
- </dl>
-
-
- <hr />
-
- <a name="title"> </a>
- <div class="fixedFont">
-
- <span class="light">{string}</span>
- <b>title</b>
-
- </div>
- <div class="description">
- The title property; corresponds to the HTML/SVG title property, allowing the
- general of simple plain text tooltips.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="top"> </a>
- <div class="fixedFont">
-
- <span class="light">{number}</span>
- <b>top</b>
-
- </div>
- <div class="description">
- The top margin; the distance, in pixels, between the top edge of the
- enclosing panel and the top edge of this mark. Note that in some cases this
- property may be redundant with the bottom property, or with the conjunction
- of bottom and height.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="type"> </a>
- <div class="fixedFont">
-
- <span class="light">{string}</span>
- <b>type</b>
-
- </div>
- <div class="description">
- The mark type; a lower camelCase name. The type name controls rendering
- behavior, and unless the rendering engine is extended, must be one of the
- built-in concrete mark types: area, bar, dot, image, label, line, panel,
- rule, or wedge.
-
-
- </div>
-
-
-
-
-
-
- <hr />
-
- <a name="visible"> </a>
- <div class="fixedFont">
-
- <span class="light">{boolean}</span>
- <b>visible</b>
-
- </div>
- <div class="description">
- The visible property; a boolean determining whether or not the mark instance
- is visible. If a mark instance is not visible, its other properties will not
- be evaluated. Similarly, for panels no child marks will be rendered.
-
-
- </div>
-
-
-
-
-
-
-
-
-
- <!-- ============================== method details ========================= -->
-
- <div class="sectionTitle">
- Method Detail
- </div>
-
- <a name="add"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>add</b>(type)
-
- </div>
- <div class="description">
- Adds a new mark of the specified type to the enclosing parent panel, whilst
- simultaneously setting the prototype of the new mark to be this mark.
-
-
- </div>
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Parameters:</dt>
-
- <dt>
- <span class="light fixedFont">{function}</span> <b>type</b>
-
- </dt>
- <dd>the type of mark to add; a constructor, such as
- <tt>pv.Bar</tt>.</dd>
-
- </dl>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the new mark.</dd>
-
- </dl>
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="#extend">#extend</a></dd>
-
- </dl>
-
- <hr />
-
- <a name="anchor"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
- <b>anchor</b>(name)
-
- </div>
- <div class="description">
- Returns an anchor with the specified name. While anchor names are typically
- constants, the anchor name is a true property, which means you can specify a
- function to compute the anchor name dynamically. See the
- <a href="../symbols/pv.Anchor.html#name">pv.Anchor#name</a> property for details.
-
-
- </div>
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Parameters:</dt>
-
- <dt>
- <span class="light fixedFont">{string}</span> <b>name</b>
-
- </dt>
- <dd>the anchor name; either a string or a property function.</dd>
-
- </dl>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> the new anchor.</dd>
-
- </dl>
-
-
-
- <hr />
-
- <a name="anchorTarget"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>anchorTarget</b>()
-
- </div>
- <div class="description">
- Returns the anchor target of this mark, if it is derived from an anchor;
- otherwise returns null. For example, if a label is derived from a bar anchor,
- <pre>bar.anchor("top").add(pv.Label);</pre>
- then property functions on the label can refer to the bar via the
- <tt>anchorTarget</tt> method. This method is also useful for mark types
- defining properties on custom anchors.
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the anchor target of this mark; possibly null.</dd>
-
- </dl>
-
-
-
- <hr />
-
- <a name="cousin"> </a>
- <div class="fixedFont">
-
-
- <b>cousin</b>()
-
- </div>
- <div class="description">
- Returns the current instance in the scene graph of this mark, in the previous
- instance of the enclosing parent panel. May return null if this instance
- could not be found. See the <a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a> function for an example
- property function using cousin.
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd>a node in the scene graph, or null.</dd>
-
- </dl>
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></dd>
-
- </dl>
-
- <hr />
-
- <a name="def"> </a>
- <div class="fixedFont">
-
-
- <b>def</b>(name, value)
-
- </div>
- <div class="description">
- Defines a local variable on this mark. Local variables are initialized once
- per mark (i.e., per parent panel instance), and can be used to store local
- state for the mark. Here are a few reasons you might want to use
- <tt>def</tt>:
- <p>1. To store local state. For example, say you were visualizing employment
- statistics, and your root panel had an array of occupations. In a child
- panel, you might want to initialize a local scale, and reference it from a
- property function:
- <pre>.def("y", function(d) pv.Scale.linear(0, pv.max(d.values)).range(0, h))
- .height(function(d) this.y()(d))</pre>
- In this example, <tt>this.y()</tt> returns the defined local scale. We then
- invoke the scale function, passing in the datum, to compute the height. Note
- that defs are similar to fixed properties: they are only evaluated once per
- parent panel, and <tt>this.y()</tt> returns a function, rather than
- automatically evaluating this function as a property.
- <p>2. To store temporary state for interaction. Say you have an array of
- bars, and you want to color the bar differently if the mouse is over it. Use
- <tt>def</tt> to define a local variable, and event handlers to override this
- variable interactively:
- <pre>.def("i", -1)
- .event("mouseover", function() this.i(this.index))
- .event("mouseout", function() this.i(-1))
- .fillStyle(function() this.i() == this.index ? "red" : "blue")</pre>
- Notice that <tt>this.i()</tt> can be used both to set the value of <i>i</i>
- (when an argument is specified), and to get the value of <i>i</i> (when no
- arguments are specified). In this way, it's like other property methods.
- <p>3. To specify fixed properties efficiently. Sometimes, the value of a
- property may be locally a constant, but dependent on parent panel data which
- is variable. In this scenario, you can use <tt>def</tt> to define a property;
- it will only get computed once per mark, rather than once per datum.
-
-
- </div>
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Parameters:</dt>
-
- <dt>
- <span class="light fixedFont">{string}</span> <b>name</b>
-
- </dt>
- <dd>the name of the local variable.</dd>
-
- <dt>
- <span class="light fixedFont">{function}</span> <b>value</b>
- <i>Optional</i>
- </dt>
- <dd>an optional initializer; may be a constant or a
- function.</dd>
-
- </dl>
-
-
-
-
-
-
-
- <hr />
-
- <a name="event"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>event</b>(type, handler)
-
- </div>
- <div class="description">
- Registers an event handler for the specified event type with this mark. When
- an event of the specified type is triggered, the specified handler will be
- invoked. The handler is invoked in a similar method to property functions:
- the context is <tt>this</tt> mark instance, and the arguments are the full
- data stack. Event handlers can use property methods to manipulate the display
- properties of the mark:
- <pre>m.event("click", function() this.fillStyle("red"));</pre>
- Alternatively, the external data can be manipulated and the visualization
- redrawn:
- <pre>m.event("click", function(d) {
- data = all.filter(function(k) k.name == d);
- vis.render();
- });</pre>
- The return value of the event handler determines which mark gets re-rendered.
- Use defs (<a href="#def">#def</a>) to set temporary state from event handlers.
- <p>The complete set of event types is defined by SVG; see the reference
- below. The set of supported event types is:<ul>
- <li>click
- <li>mousedown
- <li>mouseup
- <li>mouseover
- <li>mousemove
- <li>mouseout
- </ul>Since Protovis does not specify any concept of focus, it does not
- support key events; these should be handled outside the visualization using
- standard JavaScript. In the future, support for interaction may be extended
- to support additional event types, particularly those most relevant to
- interactive visualization, such as selection.
- <p>TODO In the current implementation, event handlers are not inherited from
- prototype marks. They must be defined explicitly on each interactive mark. In
- addition, only one event handler for a given event type can be defined; when
- specifying multiple event handlers for the same type, only the last one will
- be used.
-
-
- </div>
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Parameters:</dt>
-
- <dt>
- <span class="light fixedFont">{string}</span> <b>type</b>
-
- </dt>
- <dd>the event type.</dd>
-
- <dt>
- <span class="light fixedFont">{function}</span> <b>handler</b>
-
- </dt>
- <dd>the event handler.</dd>
-
- </dl>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> this.</dd>
-
- </dl>
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="http://www.w3.org/TR/SVGTiny12/interact.html#SVGEvents">SVG events</a></dd>
-
- </dl>
-
- <hr />
-
- <a name="extend"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
- <b>extend</b>(proto)
-
- </div>
- <div class="description">
- Sets the prototype of this mark to the specified mark. Any properties not
- defined on this mark may be inherited from the specified prototype mark, or
- its prototype, and so on. The prototype mark need not be the same type of
- mark as this mark. (Note that for inheritance to be useful, properties with
- the same name on different mark types should have equivalent meaning.)
-
-
- </div>
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Parameters:</dt>
-
- <dt>
- <span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> <b>proto</b>
-
- </dt>
- <dd>the new prototype.</dd>
-
- </dl>
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> this mark.</dd>
-
- </dl>
-
-
-
- <dl class="detailList">
- <dt class="heading">See:</dt>
-
- <dd><a href="#add">#add</a></dd>
-
- </dl>
-
- <hr />
-
- <a name="first"> </a>
- <div class="fixedFont">
-
-
- <b>first</b>()
-
- </div>
- <div class="description">
- Returns the first instance of this mark in the scene graph. This method can
- only be called when the mark is bound to the scene graph (for example, from
- an event handler, or within a property function).
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd>a node in the scene graph.</dd>
-
- </dl>
-
-
-
- <hr />
-
- <a name="last"> </a>
- <div class="fixedFont">
-
-
- <b>last</b>()
-
- </div>
- <div class="description">
- Returns the last instance of this mark in the scene graph. This method can
- only be called when the mark is bound to the scene graph (for example, from
- an event handler, or within a property function). In addition, note that mark
- instances are built sequentially, so the last instance of this mark may not
- yet be constructed.
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd>a node in the scene graph.</dd>
-
- </dl>
-
-
-
- <hr />
-
- <a name="mouse"> </a>
- <div class="fixedFont">
-
- <span class="light">{<a href="../symbols/pv.Vector.html">pv.Vector</a>}</span>
- <b>mouse</b>()
-
- </div>
- <div class="description">
- Returns the current location of the mouse (cursor) relative to this mark's
- parent. The <i>x</i> coordinate corresponds to the left margin, while the
- <i>y</i> coordinate corresponds to the top margin.
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd><span class="light fixedFont">{<a href="../symbols/pv.Vector.html">pv.Vector</a>}</span> the mouse location.</dd>
-
- </dl>
-
-
-
- <hr />
-
- <a name="render"> </a>
- <div class="fixedFont">
-
-
- <b>render</b>()
-
- </div>
- <div class="description">
- Renders this mark, including recursively rendering all child marks if this is
- a panel.
-
-
- </div>
-
-
-
-
-
-
-
-
-
-
- <hr />
-
- <a name="sibling"> </a>
- <div class="fixedFont">
-
-
- <b>sibling</b>()
-
- </div>
- <div class="description">
- Returns the previous instance of this mark in the scene graph, or null if
- this is the first instance.
-
-
- </div>
-
-
-
-
-
-
-
-
- <dl class="detailList">
- <dt class="heading">Returns:</dt>
-
- <dd>a node in the scene graph, or null.</dd>
-
- </dl>
-
-
-
-
-
-
-
- <!-- ============================== event details ========================= -->
-
-
- <hr />
- </div>
-
- <!-- ============================== footer ================================= -->
- <div class="fineprint" style="clear:both">
-
- 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)
- </div>
- </body>
- </html>
|