Vue Diagram - edges

An array of diagram edges.

Type:

Object

Default Value: null

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

View Demo

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

dataSource

Binds the edges collection to the specified data.

Type:

Array<Object>

|

DataSource

|

DataSource Configuration

Default Value: null

The Diagram widget creates a connector between two shapes for every edge in the collection.

fromExpr

Specifies the data field that provides an edge's start node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'from'

keyExpr

Specifies the data field that provides a key for an edge.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'id'

toExpr

Specifies the data field that provides an edge's end node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'to'