Graphly D3 Vue

This is a Vue component library implementing a wrapper component around Graphly D3 for an easy way to utilize it in a Vue application.

How to use

  1. install the component library with npm install graphly-d3-vue in your Vue project.
npm install @livereader/graphly-d3-vue
  1. import the GraphlyD3 component and style from the library.

import { GraphlyD3 } from "@livereader/graphly-d3-vue";
import "@livereader/graphly-d3-vue/style.css";
  1. embed the component in your Vue file with the <GraphlyD3 /> tag.
<GraphlyD3 ref="graphly" />
  1. access the ref to the Graphly D3 ForceSimulation instance and use it to control the simulation.

<template>
  <GraphlyD3 ref="graphly" />
</template>

<script setup>
	import { 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.

GraphlyD3 Props

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" />

GraphlyD3 Emits

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)" />

GitHub

View Github