Class pv.Layout.Network
Extends
pv.Layout.
Represents an abstract layout for network diagrams. This class
provides the basic structure for both node-link diagrams (such as
force-directed graph layout) and space-filling network diagrams (such as
sunbursts and treemaps). Note that "network" here is a general term that
includes hierarchical structures; a tree is represented using links from
child to parent.
Network layouts require the graph data structure to be defined using two properties:
- nodes - an array of objects representing nodes. Objects in this array must conform to the pv.Layout.Network.Node interface; which is to say, be careful to avoid naming collisions with automatic attributes such as index and linkDegree. If the nodes property is defined as an array of primitives, such as numbers or strings, these primitives are automatically wrapped in an object; the resulting object's nodeValue attribute points to the original primitive value.
- links - an array of objects representing links. Objects in this array must conform to the pv.Layout.Network.Link interface; at a minimum, either source and target indexes or sourceNode and targetNode references must be set. Note that if the links property is defined after the nodes property, the links can be defined in terms of this.nodes().
Three standard mark prototypes are provided:
- node - for rendering nodes; typically a pv.Dot. The node mark is added directly to the layout, with the data property defined via the layout's nodes property. Properties such as strokeStyle and fillStyle can be overridden to compute properties from node data dynamically.
- link - for rendering links; typically a pv.Line. The link mark is added to a child panel, whose data property is defined as layout's links property. The link's data property is then a two-element array of the source node and target node. Thus, poperties such as strokeStyle and fillStyle can be overridden to compute properties from either the node data (the first argument) or the link data (the second argument; the parent panel data) dynamically.
- label - for rendering node labels; typically a pv.Label. The label mark is added directly to the layout, with the data property defined via the layout's nodes property. Properties such as strokeStyle and fillStyle can be overridden to compute properties from node data dynamically.
Network layout properties, including nodes and links,
are typically cached rather than re-evaluated with every call to render. This
is a performance optimization, as network layout algorithms can be
expensive. If the network structure changes, call #reset to clear the
cache before rendering. Note that although the network layout properties are
cached, child mark properties, such as the marks used to render the nodes and
links, are not. Therefore, non-structural changes to the network
layout, such as changing the color of a mark on mouseover, do not need to
reset the layout.
Defined in: Network.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Constructs a new, empty network layout.
|
Field Attributes | Field Name and Description |
---|---|
The node label prototype, which renders the node name adjacent to the node.
|
|
The link prototype, which renders edges between source nodes and target
nodes.
|
|
The node prototype.
|
- Fields borrowed from class pv.Panel:
- canvas, children, defaults, overflow, transform
- 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 |
---|---|
reset()
Resets the cache, such that changes to layout property definitions will be
visible on subsequent render.
|
- Methods borrowed from class pv.Panel:
- add, anchor
- Methods borrowed from class pv.Mark:
- anchorTarget, def, event, extend, margin, mouse, render
- Returns:
- {pv.Layout.Network} this.