A Vue component library implementing Graphly D3

A Vue component library implementing Graphly D3

A Vue component library implementing Graphly D3

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...