Class Index | File Index

Classes


Class pv.Panel


Extends pv.Bar.
Represents a container mark. Panels allow repeated or nested structures, commonly used in small multiple displays where a small visualization is tiled to facilitate comparison across one or more dimensions. Other types of visualizations may benefit from repeated and possibly overlapping structure as well, such as stacked area charts. Panels can also offset the position of marks to provide padding from surrounding content.

All Protovis displays have at least one panel; this is the root panel to which marks are rendered. The box model properties (four margins, width and height) are used to offset the positions of contained marks. The data property determines the panel count: a panel is generated once per associated datum. When nested panels are used, property functions can declare additional arguments to access the data associated with enclosing panels.

Panels can be rendered inline, facilitating the creation of sparklines. This allows designers to reuse browser layout features, such as text flow and tables; designers can also overlay HTML elements such as rich text and images.

All panels have a children array (possibly empty) containing the child marks in the order they were added. Panels also have a root field which points to the root (outermost) panel; the root panel's root field points to itself.

See also the Protovis guide.
Defined in: Panel.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Constructs a new, empty panel with default properties.
Field Summary
Field Attributes Field Name and Description
 
The canvas element; either the string ID of the canvas element in the current document, or a reference to the canvas element itself.
 
The child marks; zero or more pv.Marks in the order they were added.
 
Default properties for panels.
 
Specifies whether child marks are clipped when they overflow this panel.
 
The transform to be applied to child marks.
Fields borrowed from class pv.Bar:
fillStyle, height, lineWidth, strokeStyle, width
Fields borrowed from class pv.Mark:
bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible
Method Summary
Method Attributes Method Name and Description
 
add(type)
Adds a new mark of the specified type to this panel.
 
anchor(name)
Returns an anchor with the specified name.
Methods borrowed from class pv.Mark:
anchorTarget, def, event, extend, margin, mouse, render
Class Detail
pv.Panel()
Constructs a new, empty panel with default properties. Panels, with the exception of the root panel, are not typically constructed directly; instead, they are added to an existing panel or mark via pv.Mark#add.
Field Detail
{string} canvas
The canvas element; either the string ID of the canvas element in the current document, or a reference to the canvas element itself. If null, a canvas element will be created and inserted into the document at the location of the script element containing the current Protovis specification. This property only applies to root panels and is ignored on nested panels.

Note: the "canvas" element here refers to a div (or other suitable HTML container element), not a canvas element. The name of this property is a historical anachronism from the first implementation that used HTML 5 canvas, rather than SVG.


{pv.Mark[]} children
The child marks; zero or more pv.Marks in the order they were added.
See:
#add

{pv.Panel} defaults
Default properties for panels. By default, the margins are zero, the fill style is transparent.

{string} overflow
Specifies whether child marks are clipped when they overflow this panel. This affects the clipping of all this panel's descendant marks.
See:
CSS2

{pv.Transform} transform
The transform to be applied to child marks. The default transform is identity, which has no effect. Note that the panel's own fill and stroke are not affected by the transform, and panel's transform only affects the scale of child marks, not the panel itself.
See:
pv.Mark#scale
Method Detail
{pv.Mark} add(type)
Adds a new mark of the specified type to this panel. Unlike the normal Mark#add behavior, adding a mark to a panel does not cause the mark to inherit from the panel. Since the contained marks are offset by the panel margins already, inheriting properties is generally undesirable; of course, it is always possible to change this behavior by calling Mark#extend explicitly.
Parameters:
{function} type
the type of the new mark to add.
Returns:
{pv.Mark} the new mark.

{pv.Anchor} anchor(name)
Returns an anchor with the specified name. This method is overridden such that adding to a panel's anchor adds to the panel, rather than to the panel's parent.
Parameters:
{string} name
the anchor name; either a string or a property function.
Returns:
{pv.Anchor} the new anchor.

Documentation generated by JsDoc Toolkit 2.3.2 on Sun May 30 2010 18:10:25 GMT-0700 (PDT)