Graphly D3Props
To make the component easier to work with there are a few props that wrap the simulation properties and methods.
Available Properties
| Property | Type | Description | Docs |
|---|---|---|---|
| dark | Boolean | whether to use the dark theme | Docs |
| remoteOrigin | String | the remote origin from where to fetch templates | Docs |
| selectedNodes | Array<sring> | the selected nodes | Docs |
| envGravity | Number | the gravity of the environment | Docs |
| linkDistance | Number | the minimum distance of links | Docs |
| animationDuration | Number | the duration of animations | Docs |
| draggableNodes | Boolean | whether nodes can be dragged | Docs |
| zoomEnabled | Boolean | whether the zoom is enabled | Docs |
| zoomScaleExtent | Array<nmber> | the zoom scale extent | Docs |
Example
vue
<template>
<GraphlyD3
ref="graphly"
:dark="true"
remoteOrigin="/templates"
:selectedNodes="['node-1', 'node-2']"
:envGravity="-5000"
:linkDistance="100"
:animationDuration="500"
:draggableNodes="true"
:zoomEnabled="true"
:zoomScaleExtent="[0.1, 10]"
/>
</template>