Graphly D3Emitters
To make the component easier to work with there are a few emitters that wrap the simulation Event API.
Available Emitters
| Emit | Description | Reference |
|---|---|---|
| node-click | user click on node shape | Docs |
| node-double-click | user double click on node shape | Docs |
| node-context-menu | user right click on node shape | Docs |
| node-drag-start | user started dragging a node shape | Docs |
| node-drag-move | user dragging a node shape | Docs |
| node-drag-end | user released dragging a node shape | Docs |
| link-click | user click on link shape | Docs |
| link-double-click | user double click on link shape | Docs |
| link-context-menu | user right click on link shape | Docs |
| link-drag-start | user started dragging a link shape | Docs |
| link-drag-move | user dragging a link shape | Docs |
| link-drag-end | user released dragging a link shape | Docs |
| environment-click | user click on svg background | Docs |
| environment-double-click | user double click on svg background | Docs |
| environment-context-menu | user right click on svg background | Docs |
| environment-move | svg world moved by user or moveTo method | Docs |
| simulation-tick | simulation ticked one simulation step | Docs |
| simulation-tick-end | simulation finished ticking simulation steps | Docs |
| theme-change | theme changed | Docs |
Example
vue
<template>
<GraphlyD3
ref="graphly"
@node-click="(e, d) => console.log(d.id)"
@link-click="(e, d) => console.log(d.id)"
@environment-click="(e, pos) => console.log(pos)"
@theme-change="(theme) => console.log(theme)"
/>
</template>