Checkout the Graphly D3 Docs for more details and how to access the component from there
This is a Vue component library implementing a wrapper component around Graphly D3 for an easy way to utilize it in a Vue application.
- install the component library with
npm install graphly-d3-vuein your Vue project.
npm install @livereader/graphly-d3-vue- import the
GraphlyD3component and style from the library.
import { GraphlyD3 } from "@livereader/graphly-d3-vue";
import "@livereader/graphly-d3-vue/style.css";- embed the component in your Vue file with the
<GraphlyD3 />tag.
<GraphlyD3 ref="graphly" />- access the ref to the Graphly D3 ForceSimulation instance and use it to control the simulation.
<template>
<GraphlyD3 ref="graphly" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import { GraphlyD3 } from "@livereader/graphly-d3-vue";
import "@livereader/graphly-d3-vue/style.css";
const graphly = ref(null);
onMounted(() => {
const simulation = graphly.value.simulation;
simulation.render({
nodes: [],
links: [],
})
});
</script>To learn more about the simulation reference, take a look at the Graphly D3 documentation and learn which methods and properties are available.
The GraphlyD3 Vue component accepts the following properties:
| Property | Type | Description | Reference |
|---|---|---|---|
| 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:
<GraphlyD3 ref="graphly" :dark="true" />The GraphlyD3 Vue component also emits all Event API events.
| Emit | Description | Reference |
|---|---|---|
| nodeClick | user click on node shape | Docs |
| nodeDoubleClick | user double click on node shape | Docs |
| nodeContextMenu | user right click on node shape | Docs |
| nodeDragStart | user started dragging a node shape | Docs |
| nodeDragMove | user dragging a node shape | Docs |
| nodeDragEnd | user released dragging a node shape | Docs |
| linkClick | user click on link shape | Docs |
| linkDoubleClick | user double click on link shape | Docs |
| linkContextMenu | user right click on link shape | Docs |
| linkDragStart | user started dragging a link shape | Docs |
| linkDragMove | user dragging a link shape | Docs |
| linkDragEnd | user released dragging a link shape | Docs |
| environmentClick | user click on svg background | Docs |
| environmentDoubleClick | user double click on svg background | Docs |
| environmentContextMenu | user right click on svg background | Docs |
| environmentMove | svg world moved by user or moveTo method | Docs |
| simulationTick | simulation ticked one simulation step | Docs |
| simulationTickEnd | simulation finished ticking simulation steps | Docs |
Example
<GraphlyD3 ref="graphly" @node-click="(e, d) => console.log(d.id)" />You are very welcome to join our Discord Server and ask questions or discuss ideas on how to use Graphly D3 in your projects.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent