V network graph is an interactive, SVG-based visual component of the network graph for Vue 3.
interactive network visualization examples, interactive graph visualization, network visualization tool, seaborn network graph, plotly network graph r
Features
- Create a graph according to your reactive data dynamically
- Fully configurable appearance
- SVG based
- Pan and zoom viewport
- Drag nodes
- Multiple node selection
- Multiple edge selection
- Multi-touch support
- Various events are provided
- Export as SVG text
Step by Step Bar Chart Created Using Vanilla Javascript
How to make use of it:
Install and download:
# NPM $ npm i v-network-graph --save
1. Import and register the component.
import VNetworkGraph from "v-network-graph" import "v-network-graph/style.css" Vue.use(VNetworkGraph);
2. Add the v-grid graph component to the template.
<template> <v-network-graph :nodes="nodes" :edges="edges" /> </template>
3. Set up the node and edge data as follows:
import { defineComponent } from "vue" export default defineComponent({ setup() { const nodes = { node1: { name: "Node 1" }, node2: { name: "Node 2" }, node3: { name: "Node 3" }, // ... } const edges = { edge1: { source: "node1", target: "node2" }, edge2: { source: "node2", target: "node3" }, // ... } return { nodes, edges } }, })
4. The default component props.
nodes: { type: Object as PropType<Nodes>, default: () => ({}), }, edges: { type: Object as PropType<Edges>, default: () => ({}), }, layouts: { type: Object as PropType<UserLayouts>, default: () => ({}), }, zoomLevel: { type: Number, default: 1, }, selectedNodes: { type: Array as PropType<string[]>, default: () => [], }, selectedEdges: { type: Array as PropType<string[]>, default: () => [], }, configs: { type: Object as PropType<UserConfigs>, default: () => ({}), }, paths: { type: Array as PropType<Paths>, default: () => [], }, layers: { type: Object as PropType<Layers>, default: () => ({}), }, eventHandlers: { // Since a large number of events will be issued, to avoid // contaminating the event log of the development tools, // events are designed to be notified to a handler function // specified by the user. type: Object as PropType<EventHandlers>, default: () => ({}), },
5. Default configurations.
{ view: { scalingObjects: boolean, // whether to expand the entire object. default: false panEnabled: boolean, // whether the pan is enabled or not. default: true zoomEnabled: boolean, // whether the zoom is enabled or not. default: true minZoomLevel: number, // minimum zoom level. default: 0.1 maxZoomLevel: number, // maximum zoom level. default: 64 fit: boolean, // whether to fit the content when loaded. default: false layoutHandler: LayoutHandler, // class to control node layout. default: new SimpleLayout() onSvgPanZoomInitialized: undefined | (instance) => void, // callback on init svg-pan-zoom. default: undefined grid: { visible: boolean, // whether to show the grid in the background. default: false interval: number, // grid line spacing. default: 10 thickIncrements: number, // increments of ticks to draw thick lines. default: 5 line: { // normal line style color: string, // default: "#e0e0e0", width: number, // default: 1 dasharray: number // default: 1 }, thick: { // thick line style color: string, // default: "#cccccc", width: number, // default: 1 dasharray: number // default: 0 } } }, node: { normal: { // * These fields can also be specified with the function as `(node) => value`. type: "circle" | "rect", // shape type. default: "circle" radius: number, // radius of circle. default: 16 width: number, // width of rect. default: (not specified) height: number, // height of rect. default: (not specified) borderRadius: number, // border radius of rect. default: (not specified) color: string, // fill color. default: "#4466cc" strokeWidth: number, // stroke width. default: 0 strokeColor: string | undefined, // stroke color. default: "#000000" strokeDasharray: number | string | undefined // stroke dash array. default: 0 }, hover: { /* same structure as `node.normal`. */ } | undefined, // default: { // color: "#3355bb", // ... all other values are same as `normal` // } selected: { /* same structure as `node.normal`. */ } | undefined, // default: undefined draggable: boolean, // whether the node is draggable or not. default: true selectable: boolean, // whether the node is selectable or not. default: false label: { // * These fields can also be specified with the function as `(node) => value`. visible: boolean, // whether the node's label is visible or not. default: true fontFamily: string | undefined, // font family. default: undefined fontSize: number, // font size. default: 11 lineHeight: number, // line height (multiplier for font size). default: 1.1 color: string, // font color. default: "#000000" background: { // background config. default: undefined visible: boolean, // whether the background is visible or not. color: string, // background color. padding: number | { // padding. vertical: number, // vertical padding. horizontal: number, // horizontal padding. }, borderRadius: number // border radius. } | undefined, margin: number, // margin from node. default: 4 direction: NodeLabelDirection, // node label display direction. default: SOUTH text: string // field name in the node object to use as the label. default: "name" // if function is specified, the return value is string of label. }, focusring: { visible: boolean, // whether the focus ring is visible or not. default: true width: number, // line width of the focus ring. default: 4 padding: number, // distance between the focus ring and the node. default: 3 color: string // fill color. default: "#eebb00" } }, edge: { normal: { // * These fields can also be specified with the function as `(edge) => value`. width: number, // width of edge. default: 2 color: string, // line color. default: "#4466cc" dasharray: number | string | undefined, // stroke dash array. default: 0 linecap: "butt" | "round" | "square" | undefined, // stroke linecap. default: "butt" animate: boolean, // whether to animate or not. default: false animationSpeed: number // animation speed. default: 100 }, hover: { /* same structure as `normal`. */ } | undefined, // default: { // color: "#3355bb", // ... all other values are same as `edge.normal` // }, selected: { /* same structure as `normal`. */ } | undefined, // default: { // color: "#dd8800", // dasharray: (wider than `normal`), // ... all other values are same as `edge.normal` // } selectable: boolean, // whether the edge is selectable or not. default: false gap: number | ((edges: Edges, configs: Configs) => number), // number: distance between edges. // func : function to calculate gap from edge list between nodes. // default: 3 marker: { source: { type: "none" | "array" | "angle" | "circle" | "custom", // type of marker. default: "none" width: number, // width of marker. default: 5 height: number, // height of marker. default: 5 margin: number, // distance between marker and end of edge. default: -1 units: "strokeWidth" | "userSpaceOnUse", // units of width, height and margin. default: "strokeWidth" color: string | null, // color of marker. null: same as edge color. default: null customId: string | undefined // custom marker ID for marker type is "custom". default: undefined }, target: { /* same structure as `source`. */ } }, summarize: boolean | ((edges: Edges, configs: Configs) => boolean), // true : summarize when the width of the edge becomes larger than the node. // false: do not summarize. // func : function to determine whether to summarize from edge list between nodes. // default: true summarized: { // configs for summarized edge label: { fontSize: number, // font size. default: 10 color: string // font color. default: "#4466cc" }, shape: { /* same structure as `node.normal`. */ }, // default: { // type: "rect", // width: 12, // height: 12, // borderRadius: 3, // color: "#ffffff", // strokeWidth: 1, // strokeColor: "#4466cc", // strokeDasharray: undefined // } stroke: { /* same structure as `edge.normal`. */ } // default: { // width: 5, // color: "#4466cc", // dasharray: undefined, // linecap: undefined, // animate: false, // animationSpeed: 50 // } } }, label: { fontFamily: string | undefined, // font family. default: undefined fontSize: number, // font size. default: 11 lineHeight: number, // line height (multiplier for font size). default: 1.1 color: string, // font color. default: "#000000" background: { // background config. default: undefined visible: boolean, // whether the background is visible or not. color: string, // background color. padding: number | { // padding. vertical: number, // vertical padding. horizontal: number, // horizontal padding. }, borderRadius: number // border radius. } | undefined, margin: number, // distance from edge stroke. default: 4 padding: number // distance from end node. default: 4 } }, path: { visible: boolean, // whether the paths are visible or not. default: false clickable: boolean, // whether paths are clickable or not. default: false curveInNode: boolean, // whether to curve paths within nodes. default: false path: { // * These fields can also be specified with the function as `(path) => value`. width: number, // width of path. default: 6 color: string, // path color. default: (Func to select a color from a hash of edges.) dasharray: number | string | undefined, // stroke dash array. default: undefined linecap: "butt" | "round" | "square" | undefined, // stroke linecap. default: "round" linejoin: "miter" | "round" | "bevel", // stroke linejoin. default: "round" animate: boolean, // whether to animate or not. default: false animationSpeed: number // animation speed. default: 50 }, } }
Interactive Network Graph Visualization Component For Vue 3, v network graph Plugin/Github
See Demo And Download
Official Website(dash14): Click Here
This superior jQuery/javascript plugin is developed by dash14. For extra advanced usage, please go to the official website.