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
	pv.Panel() Constructs a new, empty panel with default properties.

Field Summary
Field Attributes	Field Name and Description
	canvas The canvas element; either the string ID of the canvas element in the current document, or a reference to the canvas element itself.
	children The child marks; zero or more pv.Marks in the order they were added.
	defaults Default properties for panels.
	overflow Specifies whether child marks are clipped when they overflow this panel.
	transform 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.

Classes

Class pv.Panel