Vue Diagram - nodes

An array of diagram nodes.

Type:

Object

Default Value: null

Use the nodes option to populate an array of diagram nodes.

View Demo

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks
        },
        layout: "tree"
    });
});

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.

itemsExpr

Specifies the data field that contains nested items.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'items'

keyExpr

Specifies the data field that provides a node's key.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'id'

parentKeyExpr

Specifies data field that provides a parent node ID for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'parentId'

textExpr

Specifies data field that provides a text for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'text'

typeExpr

Specifies data field that provides a shape type for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'type'