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.
Constructor Attributes | Constructor Name and Description |
---|---|
pv.Panel()
Constructs a new, empty panel with default properties.
|
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 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.
|
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.
- See:
- #add
- See:
- CSS2
- See:
- pv.Mark#scale
- Parameters:
- {function} type
- the type of the new mark to add.
- Returns:
- {pv.Mark} the new mark.
- Parameters:
- {string} name
- the anchor name; either a string or a property function.
- Returns:
- {pv.Anchor} the new anchor.