Vue Diagram - edges

Allows you to bind the collection of diagram edges to a data source.

Type:

Object

Default Value: null

View Demo

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 name of a data source field or an expression that provides an edge's start node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'from'

fromLineEndExpr

Specifies the name of a data source field or an expression that provides an edge's line start tip.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

fromPointIndexExpr

Specifies the name of a data source field or an expression that provides an index of a shape connection point where an edge starts.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

keyExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'id'

lineTypeExpr

Specifies the name of a data source field or an expression that provides an edge's line type.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

lockedExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

pointsExpr

Specifies the name of a data source field or an expression that provides an edge's key points.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

styleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

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

View Demo

textExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

textStyleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

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

View Demo

toExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'to'

toLineEndExpr

Specifies the name of a data source field or an expression that provides an edge's line end tip.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

toPointIndexExpr

Specifies the name of a data source field or an expression that provides an index of a shape connection point where an edge ends.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

zIndexExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The z-index specifies the edge stack order. An edge with greater stack order is in front of an edge with a lower stack order.