结合给定数据使用JointJS自动绘制元素

我们给定一串数据，然后结合数据用 JointJS 在画布中绘制出元素

data.js

export default [{id: 1,type: 'start',name: '事件',prev: [],next: [2, 5, 6]
}, {id: 2,type: 'field',name: '字段1',prev: [1],next: [4]
}, {id: 4,type: 'field',name: '字段2',prev: [2],next: [3]
}, {id: 5,type: 'field',name: '字段3',prev: [1],next: [4]
}, {id: 6,type: 'field',name: '字段4',prev: [1],next: [4]
}, {id: 3,type: 'end',name: '结束',prev: [4],next: []
}]

vue 文件

<template><div class="canvas" ref="canvas"></div>
</template>

import {dia, layout, shapes} from 'jointjs'
import dagre from 'dagre'
import graphlib from '@dagrejs/graphlib'
import data from "./data"
export default {data() {return {graph: null,paper: null,items: data,nodeSet: {}}},mounted() {this.init()this.render()},methods: {init() {const canvasRect = this.$refs.canvas.getClientRects()[0]this.graph = new dia.Graph()this.paper = new dia.Paper({el: this.$refs.canvas,model: this.graph,width: canvasRect.width,height: canvasRect.height,gridSize: 1})// See https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.Paper.eventsthis.paper.on('element:pointerclick', (cell) => {Object.keys(this.nodeSet).forEach(item => {if (this.nodeSet[item].id === cell.model.id) {console.log(item) // 当前点击元素idconsole.log(data[item]) // 当前点击元素内容}})})},render() {const {nodes, links, nodeSet} = thisnodes.forEach((node) => {const option = {size: {width: 100,height: 40},attrs: {body: {fill: '#ddd',strokeWidth: 1,stroke: '#ccc'},label: {text: node.name,fill: '#333'}}}let itemif (node.type === 'start' || node.type === 'end') {item = new shapes.standard.Ellipse(option)} else {item = new shapes.standard.Rectangle(option)}item.addTo(this.graph)nodeSet[node.id] = item})links.forEach(([from, to]) => {const link = new shapes.standard.Link({source: nodeSet[from],target: nodeSet[to],attrs: {line: {stroke: '#aaa'}}})link.addTo(this.graph)})this.doLayout()},doLayout() {layout.DirectedGraph.layout(this.graph, {dagre: dagre,graphlib: graphlib,setLinkVertices: false,rankDir: 'LR', //节点方向 有几个选项 "TB" (top-to-bottom) / "BT" (bottom-to-top) / "LR" (left-to-right) / "RL" (right-to-left)align: 'DL',rankSep: 50,marginX: 60,marginY: 60,nodeSep: 50,edgeSep: 20})}},computed: {nodes() {const nodes = []this.items.forEach(item => {nodes.push(item)})return nodes},links() {const links = []this.items.forEach(item => {item.next.forEach(p => {links.push([item.id, p])})})return links}}
}
</script>

效果

结合给定数据使用JointJS自动绘制元素相关推荐

数据可视化——R语言绘制散点相关图并自动添加相关系数和拟合方程
数据可视化--R语言绘制散点相关图并自动添加相关系数和拟合方程加载所需的包并设置主题样式示例数据基本的散点相关图添加相关系数和显著性水平(P值) 存在多个组别的散点相关图自动添加回归曲线的拟 ...
数字化测图是利用计算机自动绘制地形图,运用VirtuoZo软件实现航空摄影测量数字化测图...
摘要本文简单介绍了航空摄影测量地形图成图的内业数据处理步骤,并结合VirtuoZo.NT版数字摄影测量软件进行了具体说明. Abstract:this text to in brief intro ...
matlab画圆环弯矩图,用MATLAB实现弯矩图的自动绘制
年月第期河北工程技术高等专科学校学报文章编号一一一用实现弯矩图的自动绘制陈桂琴河北工程技术高等专科学校计算中心 , 河北沧州 . 摘要介绍用实 ...
自动绘制公路工程纵断面的AutoLisp程序
自动绘制公路工程纵断面的AutoLisp程序通过读取路面桩号的Excel表自动绘制纵剖面图程序(含相应AotuCad图及Excel数据) 这个程序是用于一个乡村道路绘制竣工图时使用的,主要作用是用来 ...
斐波那契回调线怎么画_自动绘制斐波那契回调线的指标
斐波那契回调线是根据斐波那契数列(也称为黄金分割数列)所对应的点画出来的一组线,它的作用主要是用来分析行情的回调力度及相应的回撤点上存在的支撑或阻力作用.黄金分割在外汇黄金交易市场上是一个被广泛应用的 ...
利用FME自动绘制等高线
作者:王芫最近进行DWG数据坐标转换项目,遇到客户转换前数据为1956年黄海高程基准数据,转换后按照数据存储要求需要转换为1985年国家高程基准数据.因此,在自动重构等高线方面做了一些研究. 56高 ...
python数据可视化之简单绘制简单折线图
python数据可视化之简单绘制简单折线图 1. 首先安装matplotlib liunx安装命令: $ sudo apt-get install python3-matplotlib windows ...
基于Java的双代号网络图自动绘制系统
资源下载地址:https://download.csdn.net/download/sheziqiong/85718549 资源下载地址:https://download.csdn.net/downl ...
图像数据标注在自动驾驶场景中的应用及标注方法
在人工智能计算机视觉技术中,图像数据标注是选择图像中的对象并按照名称进行标记的过程,图像数据标注有着广泛的细分应用,例如,医疗成像分析被用来提高疾病的预测.诊断和治疗:自动驾驶汽车可以准确的识别图像中 ...

结合给定数据使用JointJS自动绘制元素

结合给定数据使用JointJS自动绘制元素相关推荐

最新文章

热门文章