Vue Diagram - nodes

Default Value: null

autoLayout

Specifies an auto-layout algorithm that the widget uses to build a diagram.

Type:

|

Default Value: 'tree'

Accepted Values: 'off' | 'tree' | 'layered'

The layout option is in effect when a diagram is bound to a data source using the nodes option.

childrenExpr

Specifies the name of a data source field or an expression that provides a container's nested items.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: 'children'

This option is in effect for nodes of the "verticalContainer" or "horizontalContainer" type.

containerKeyExpr

Specifies the name of a data source field or an expression that provides a key of a node's parent container node.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

The parent container node must be of the "verticalContainer" or "horizontalContainer" type.

To use the containerKeyExpr option set the childrenExpr option to 'null'.

dataSource

Binds the nodes collection to the specified data.

Type:

Array<Object>

|

DataSource

|

DataSource Configuration

Default Value: null

The Diagram widget creates a shape for every node in the collection.

heightExpr

Specifies the name of a data source field or an expression that provides a node's height.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

imageUrlExpr

Specifies the name of a data source field or an expression that provides a node image's URL.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

This option is in effect for nodes of the "cardWithImageOnLeft", "cardWithImageOnTop", or "cardWithImageOnRight" type.

itemsExpr

Specifies the name of a data source field or an expression that provides a node's nested items.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

keyExpr

Specifies the name of a data source field or an expression that provides node keys.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: 'id'

leftExpr

Specifies the name of a data source field or an expression that provides the x-coordinate of a node's left border.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

The units option specifies the measurement unit.

NOTE

Shape coordinates specified by the leftExpr and topExpr options are ignored when the autoLayout.type option is set to layered or tree.

lockedExpr

Specifies the name of a data source field or an expression whose values indicate whether a node is locked.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

parentKeyExpr

Specifies the name of a data source field or an expression that provides a parent node key for a node.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

styleExpr

Specifies the name of a data source field or an expression that provides a node style.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

The style settings must be specified as CSS rules presented in JSON format, for instance { "stroke": "#444444" }.

textExpr

Specifies the name of a data source field or an expression that provides node texts.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: 'text'

textStyleExpr

Specifies the name of a data source field or an expression that provides a node's text style.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

The style settings must be specified as CSS rules presented in JSON format, for instance { "font-weight": "bold", "text-decoration": "underline" }.

topExpr

Specifies the name of a data source field or an expression that provides the y-coordinate of a node's top border.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

The units option specifies the measurement unit.

NOTE

Shape coordinates specified by the leftExpr and topExpr options are ignored when the autoLayout.type option is set to layered or tree.

typeExpr

Specifies the name of a data source field or an expression that provides the shape type for a node.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: 'type'

widthExpr

Specifies the name of a data source field or an expression that provides a node's width.

Type:

|

Function parameters:

data:

The current node's data object.

Default Value: undefined

zIndexExpr

Specifies the name of a data source field or an expression that provides a node's z-index.

Type:

|

Function parameters:

data: