Vue 中基于节点的可视化图形组件 - vnodes

Vue 中基于节点的可视化图形组件 - vnodes
插件名称 vnodes
发布时间 2021年9月9日
插件作者 txlabs

vnodes 是一组组件,可帮助您使用 SVG 和 Vue.js 绘制交互式、基于 SVG 的可视化图形和图表。

安装和下载:

# NPM
$ npm i vnodes --save

使用它:

1. 导入 vnodes 组件。

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

2. 创建一个基本的基于节点的图。

<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.可用道具。

// Edge Props
data: { // 图边引用
  type: Object,
  required: true // { from: String|Object, to: String|Object }
},
nodes: { // 图节点引用
  type: Array,
},

// Group Props
nodes: {
  type: Array,
  default: []
},
margin: {
  type: Number,
  default: 20
},
padding: { // 除节点 minxy, maxxy 外,group 覆盖的额外区域
  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 允许显示边框和越界内容
},
useDrag: {
  type: Boolean,
  default: true // 设置为false覆盖鼠标拖动行为
},
fit: {
  type: Boolean,
  default: true // 设置 false 以防止拟合内容
},

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

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