Press "Enter" to skip to content

Vue Node-based SVG Visual Graphs Visualization Components | vnodes

vnodes are the bare Vue components for creating interactive graphs, diagrams, or node visual tools in SVG. Vnodes are independent components and can only be used when desired. Rather than being locked into a complex framework, these components are designed to be minimal and still allow building complex applications.

graph visualization online, network graph visualization, graph visualization js, graph visualization tool, javascript node graph visualization

How to make use of it:

Install and download:

# NPM
$ npm i vnodes --save

1. Import vnodes components.

import { Screen, Node, Edge, Group, Label, Port, Markers, graph } from 'vnodes'
export default {
  components: {
     Screen,
     Node,
     Edge,
     // ...
  }
  // ...
}

2. Create a basic node-based graph.

<template>
  <screen ref="screen">
    <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
    </edge>
    <node v-for="node in graph.nodes" :data="node" :key="node.id">
      HTML Here
    </node>
  </screen>
</template>
export default {
  components: {
     Screen,
     Node,
     Edge
     // ...
  }
  data () {
    return {
      graph: new graph()
    }
  }
  created () {
    this.graph.createNode('a')
    this.graph.createNode('b')
    this.graph.createEdge('a', 'b')
    this.graph.graphNodes()
  }
}

3. Props are available.

// Edge Props
data: { // graph edge referece
  type: Object,
  required: true // { from: String|Object, to: String|Object }
},
nodes: { // graph nodes reference
  type: Array,
},

// Group Props
nodes: {
  type: Array,
  default: []
},
margin: {
  type: Number,
  default: 20
},
padding: { // additional area covered by group besides nodes minxy, maxxy
  type: Object,
  default: () => ({ left: 10, right: 10, top: 10, bottom: 10 })
},
disableDrag: false,

// Label Props
edge: {
  type: Object,
  required: true // { id, pathd } required
},
perc: {
  type: Number,
  default: 50
},
offset: {
  type: Object,
  default: () => ({x: 0, y: 0})
},
align: {
  type: String,
  default: 'center'
},
rotate: {
  type: Boolean,
  default: false
},
useDrag: {
  type: Boolean,
  default: false
},
connector: {
  type: Boolean,
  default: false,
},

// Markers Props
// array of marker objects { id:String, type:String, scale:Number, style:String }
markers: Array,
// Node Props
data: {},
margin: {
  type: Number,
  default: 10, // margin allows border and out of bounds contents to display
},
useDrag: {
  type: Boolean,
  default: true // set to false to override mouse drag behavior
},
fit: {
  type: Boolean,
  default: true // set false to prevent fitting contents
},

// Port props
startOffset: Object, // { x, y }
edgesFrom: {
  type: Array,
  default: () => []
},
edgesTo: {
  type: Array,
  default: () => []
},

// Screen Props
markers: {
  type: Array, // { id:String, type: 'arrow|circle|square|diamond', scale: Number, style: String }
  default: () => []
},
options: {
  type: Object,
  default: () => ({})
}

network-graph-visualization

graph-visualization-online

graph-visualization-tool

Node-based Visual Graph Components In Vue, vnodes Plugin/Github, node js graph visualization


See Demo And Download

Official Website(txlabs): Click Here

This superior jQuery/javascript plugin is developed by txlabs. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.