Specifies custom data for the RadialLayout.
Examples
The following example shows how to create a new instance of RadialLayoutData and use it with an RadialLayout:
const layoutData = new RadialLayoutData()
// use the current selection as center nodes
layoutData.centerNodes = graphComponent.selection.selectedNodes
graph.applyLayout(new RadialLayout(), layoutData)In many cases the complete initialization of RadialLayoutData can also be done in a single object initializer:
const layoutData = new RadialLayoutData({
// use the current selection as center nodes
centerNodes: graphComponent.selection.selectedNodes
})
graph.applyLayout(new RadialLayout(), layoutData)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.radial.RadialLayoutData
See Also
Constructors
Creates a new instance of RadialLayoutData which helps configuring RadialLayout.
Parameters
A map of options to pass to the method.
- centerNodes - DpKeyItemCollection<INode>
The collection of nodes that shall be placed in the center. This option sets the centerNodes property on the created object.
- nodeInfos - IMapper<INode,RadialLayoutNodeInfo>
The mapping from nodes to a RadialLayoutNodeInfo describing on which circle and in which sector the node is placed. This option sets the nodeInfos property on the created object.
- nodeHalos - ItemMapping<INode,NodeHalo>
- abortHandler - AbortHandler
The AbortHandler used during the layout. This option sets the abortHandler property on the created object.
- edgeBundleDescriptors - ItemMapping<IEdge,EdgeBundleDescriptor>
The mapping of edges to their EdgeBundleDescriptor. This option sets the edgeBundleDescriptors property on the created object.
- layerIds - ItemMapping<INode,number>
The mapping from nodes to their layer/circle index when using the layering strategy USER_DEFINED. This option sets the layerIds property on the created object.
- nodeTypes - ItemMapping<INode,Object>
The mapping from nodes to an object defining the node type, which influences the ordering of nodes on the same circle such that nodes of the same type are preferably placed next to each other. This option sets the nodeTypes property on the created object.
- nodeComparables - ItemMapping<INode,IComparable>
The mapping from nodes to an IComparable (for example number or string) defining their sequence sort order. This option sets the nodeComparables property on the created object.
- outEdgeComparers - ItemMapping<INode,system.Comparison<IEdge>>
The mapping from nodes to comparison functions used to sort the nodes' outgoing edges, which ultimately orders the successor nodes of a node. This option sets the outEdgeComparers property on the created object.
Properties
Gets or sets the AbortHandler used during the layout.
Remarks
An AbortHandler can be used to gracefully stop or cancel a running layout and offers options for automatically doing so after a predetermined time.
An AbortHandler configured or set here overrides the one on LayoutExecutor.
Examples
The most common use case would be to just configure the AbortHandler here, e.g. to set timeouts for a graceful stop or canceling the running layout:
layoutData.abortHandler.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler.cancelDuration = TimeSpan.fromSeconds(30)layoutData.abortHandler!.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler!.cancelDuration = TimeSpan.fromSeconds(30)
If there's already an AbortHandler instance that's pre-configured or will be used in a different place to, e.g., cancel the layout when the user presses a button, you can also set one explicitly:
layoutData.abortHandler = abortHandlerSee Also
Gets or sets the collection of nodes that shall be placed in the center.
Remarks
Examples
Defining the nodes that should be placed in the center can be done in various ways, mostly depending on which option is more convenient for a particular use case. You can use the ItemCollection<TItem>'s source property to use any .NET collection or IEnumerable<T>:
layoutData.centerNodes = graphComponent.selection.selectedNodesAlternatively, ItemCollection<TItem> also has an items property, which is a collection that already exists, in case the items may have to be added one by one. This can be more convenient than defining an own list and setting it to source:
layoutData.centerNodes.items.add(node1)
layoutData.centerNodes.items.add(node2)A powerful option that doesn't use a collection is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// We assume here that all nodes have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.centerNodes = (node) => node.tag.placeInCenterSee Also
Gets or sets the mapping of edges to their EdgeBundleDescriptor.
Remarks
Bundling together multiple edges means that their common parts are to some degree merged into a bundled part. At the source and target point, the edges are again clearly split.
If an edge is mapped to null, the default descriptor is used.
See Also
Gets or sets the mapping from nodes to their layer/circle index when using the layering strategy USER_DEFINED.
Remarks
Nodes with the same ID are placed on the same circle while the circles are sorted according to their IDs such that a smaller ID means that the circle has a smaller radius and is closer to the center of the radial layout.
When providing user-defined IDs, the center nodes (nodes on the innermost circle) are not determined by the specified centerNodesPolicy anymore. Instead, the nodes with the smallest given ID (i.e. 0) define the set of center nodes.
See Also
Gets or set the mapping from nodes to an IComparable (for example number or string) defining their sequence sort order.
Remarks
This property is convenient to use if all nodes are to be ordered based on simple comparable values (e.g., numbers or strings). Instead, use the outEdgeComparers property if only edges at certain local "root" nodes are to be ordered or if the ordering depends on the local "root" node.
While the feature of ordering nodes is compatible with any kind of input graph structure, it is especially suitable for tree-like graphs to sort child nodes of a local root node. Using non-tree graphs, the performance may be significantly worse. A possible workaround is to wrap the layout algorithm with a TreeReductionStage that reduces the input to a tree graph and manually routes the non-tree edges.
Examples
// Sort nodes based on the label text of the nodes
layoutData.nodeComparables = (node) =>
node.labels.some() ? node.labels.first().text : null// Sort nodes based on the label text of the nodes
layoutData.nodeComparables = (node) =>
node.labels.some() ? (node.labels.first().text as any) : nullSee Also
Gets or sets the mapping from nodes to their NodeHalo.
Remarks
Examples
The easiest option is to reserve the same space around all nodes, by setting a constant NodeHalo:
layoutData.nodeHalos.constant = NodeHalo.create(20)Handling only certain nodes differently can be done easily by using the mapper property:
// node1 only reserves space above and below
layoutData.nodeHalos.mapper.set(node1, NodeHalo.create(20, 0, 0, 10))
// node2 has space all around
layoutData.nodeHalos.mapper.set(node2, NodeHalo.create(25))
// all other nodes don't get extra spaceIn cases where the NodeHalo for each node can be determined by looking at the node itself it's often easier to just set a delegate instead of preparing a mapper:
// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node) => NodeHalo.create(parseFloat(node.tag))// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node: INode): NodeHalo =>
NodeHalo.create(parseFloat(node.tag))See Also
Gets or sets the mapping from nodes to a RadialLayoutNodeInfo describing on which circle and in which sector the node is placed.
Remarks
Examples
const layoutData = new RadialLayoutData()
layoutData.nodeInfos = new Mapper()
graph.applyLayout(new RadialLayout(), layoutData)
for (const node of graph.nodes) {
const info = layoutData.nodeInfos.get(node)
console.log(
`Node ${node} has been placed in circle ${info.circleIndex} with radius ${info.radius}.`
)
console.log(
`It has been placed in a segment from ${info.sectorStart} to ${
info.sectorStart + info.sectorSize
} degrees`
)
}const layoutData = new RadialLayoutData()
layoutData.nodeInfos = new Mapper<INode, RadialLayoutNodeInfo>()
graph.applyLayout(new RadialLayout(), layoutData)
for (const node of graph.nodes) {
const info = layoutData.nodeInfos.get(node)!
console.log(
`Node ${node} has been placed in circle ${info.circleIndex} with radius ${info.radius}.`
)
console.log(
`It has been placed in a segment from ${info.sectorStart} to ${
info.sectorStart + info.sectorSize
} degrees`
)
}See Also
Gets or sets the mapping from nodes to an object defining the node type, which influences the ordering of nodes on the same circle such that nodes of the same type are preferably placed next to each other.
Remarks
Node types are a subordinate criterion for nodes of the same circle. More precisely, for nodes of the same circle (i.e., within the same layer), the algorithm prefers to place nodes of the same type next to each other if this does not lead to additional crossings or conflicts with other constraints.
Note that the algorithm uses an local optimization heuristic to improve the placement with respect to node types and therefore does not guarantee optimal results. Furthermore, this additional step may increase the required runtime. The layer assignment is not affected by the node types.
See Also
Sample Graphs
Gets or sets the mapping from nodes to comparison functions used to sort the nodes' outgoing edges, which ultimately orders the successor nodes of a node.
Remarks
If all nodes are to be ordered based on simple comparable values (e.g., numbers or strings), then it is more convenient to use the nodeComparables property instead. Use this property if only edges at certain local "root" nodes are to be ordered or if the ordering depends on the local "root" node.
While this feature is compatible with any kind of input graph structure, it is especially suitable for tree-like graphs to sort child nodes of a local root node. Using non-tree graphs, the performance may be significantly worse. A possible workaround is to wrap the layout algorithm with a TreeReductionStage that reduces the input to a tree graph and manually routes the non-tree edges.
Examples
Setting a constant comparison function means that the edges around all nodes in the graph are order using the function.
// Use the same constant comparison function at all nodes
layoutData.outEdgeComparers = (edge1, edge2) => {
// Order the edges based on the height of the target node
const height1 = edge1.targetNode.layout.height
const height2 = edge2.targetNode.layout.height
return Comparers.compare(height1, height2)
}// Use the same constant comparison function at all nodes
layoutData.outEdgeComparers = (edge1: IEdge, edge2: IEdge) => {
// Order the edges based on the height of the target node
const height1 = edge1.targetNode!.layout.height
const height2 = edge2.targetNode!.layout.height
return Comparers.compare(height1, height2)
}Using a delegate is convenient if the edges should be ordered only for specific nodes.
layoutData.outEdgeComparers = (node) => {
if (node == specificNode) {
// Define a comparison function only for a specific node
// ... and sort based on an order value specified in the edge's tag
return (edge1, edge2) =>
edge1.tag.sequenceOrder.compareTo(edge2.tag.SequenceOrder)
}
}layoutData.outEdgeComparers = (node) => {
if (node == specificNode) {
// Define a comparison function only for a specific node
// ... and sort based on an order value specified in the edge's tag
return (edge1: IEdge, edge2: IEdge) =>
edge1.tag.sequenceOrder.compareTo(edge2.tag.SequenceOrder)
}
}See Also
Methods
Combines this instance with the given layout data.
Remarks
Parameters
A map of options to pass to the method.
- data - LayoutData
- The LayoutData to combine this instance with.
Returns
- ↪LayoutData
- The combined layout data.