Props
| Prop name | Description | Type | Required | Default | Update |
|---|---|---|---|---|---|
| nodes | nodes in the graph | Nodes | true | - | no |
| edges | edges in the graph | Edges | true | - | no |
| paths | paths | Paths | false | {} | no |
| layouts | positions of the nodes | Layouts | false | {} | yes |
| selected-nodes | node ID list user selected | string[] | false | [] | yes |
| selected-edges | edge ID list user selected | string[] | false | [] | yes |
| selected-paths | path ID list user selected | string[] | false | [] | yes |
| zoom-level | zoom level | number | false | 1.0 | yes |
| configs | configurations | UserConfigs | false | {} | no |
| layers | additional layers | Layers | false | {} | no |
| event-handlers | handlers to get detailed events | EventHandlers | false | {} | no |
A prop with the Update column set to yes can receive updated data with a 2-way binding using v-model:{prop name}.
See below for definitions of the original interface types listed in the Type column.
(cf. https://github.com/dash14/v-network-graph/blob/main/src/common/types.ts)
Nodes:
js
{
"NODE_ID1": { /* with arbitrary information of this node */ },
"NODE_ID2": { ... },
...
}Edges:
js
{
"EDGE_ID1": {
source: "SOURCE_NODE_ID",
target: "TARGET_NODE_ID",
/* with arbitrary information of this edge */
},
"EDGE_ID2": { ... },
...
}Paths:
js
{
"PATH_ID1": {
/* The edge IDs through which the path passes: */
edges: [ "EDGE_ID1", "EDGE_ID2", ... ]
/* with arbitrary information of this node */
},
"PATH_ID2": { ... },
...
}Layouts:
js
{
"nodes": {
"NODE_ID1": { x: POS_X, y: POS_Y },
"NODE_ID2": { ... },
...
}
}UserConfigs:
See the "Configurations" page.
Layers:
js
{
"LAYER_ID": POSITION, // "paths" | "nodes" | "focusring" | "edges" | "base" | "grid" | "background" | "root"
...
}The layer specified by "LAYER_ID" will be placed above the layer specified by POSITION.
The actual drawing of the layer is done using v-slots. Examples are in preparation.
EventHandlers:
js
{
"*": (type, event) => { /* processing... */ },
"EVENT_TYPE": (event) => { /* processing... */ },
...
}See also Events (with event-handlers).
For more information of type and event, please refer to the following URL.
https://github.com/dash14/v-network-graph/blob/main/src/common/types.ts#L147
