Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）

这里主要是针对vis的network图进行节点动态添加

图用的是vis.js，表单使用的是element-ui

程序运行截图如下：

添加一个节点：

这里是不需要刷新页面就能添加的。

程序结构如下：

关键源码如下：

FormGroup.vue

<template><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="id" prop="pass"><el-input v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="结点名" prop="checkPass"><el-input v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="连接到节点ID" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</template><script>import {addNode} from 'JS/visTest.js'export default {data() {let checkAge = (rule, value, callback) => {};let validatePass = (rule, value, callback) => {};let validatePass2 = (rule, value, callback) => {};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {addNode(this.ruleForm['pass'], this.ruleForm['checkPass'], this.ruleForm['age']);},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

HelloWorld.vue

<template><div><div id="networkDemo" style="width:800px; height: 600px"></div><FormGroup></FormGroup></div></template><script>import {createNode} from 'JS/visTest.js'import FormGroup from './FormGroup'
export default {name: 'HelloWorld',mounted(){this.init();},components:{FormGroup},data () {return {msg: 'Welcome to Your Vue.js App'}},methods: {init(){createNode('networkDemo')}}
}
</script><style scoped>
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: '#app',router,components: {App},template: '<App/>'
})

visTest.js

import vis from 'vis'let nodes;
let edges;export function createNode(idStr) {nodes = new vis.DataSet([{id: 1, label: 'Node 1'},{id: 2, label: 'Node 2'},{id: 3, label: 'Node 3'},{id: 4, label: 'Node 4'},{id: 5, label: 'Node 5'},]);edges = new vis.DataSet([{from: 1, to: 3, label: 'Hello'},{from: 1, to: 2},{from: 2, to: 4},{from: 2, to: 5},{from: 3, to: 5}])let container = document.getElementById(idStr);let data = {nodes: nodes,edges: edges};let options = {};let network = new vis.Network(container, data, options);
}export function addNode(id, label, toId){let newNode = {id: id, label: label};let line = {from: id, to: toId};console.log(newNode)nodes.add(newNode);edges.add(line);console.log("add Node over");
}

Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）相关推荐

Web前端文档阅读笔记-vis.js在vue cli中的使用
程序运行截图如下: 首先要用npm导入的vis包 npm run vis 程序结构如下: 源码如下: HelloWorld.vue <template><div id="n ...
two.js文档阅读笔记-two.js的基本使用
介绍 two.js是一个前端绘制2d图形的api.可以使用svg,canvas,webgl进行渲染. 基本使用代码如下: <!DOCTYPE html> <html lang=&q ...
FreeRTOS官方指导文档阅读笔记
FreeRTOS官方指导文档阅读笔记基于 161204_Mastering_the_FreeRTOS_Real_Time_Kernel-A_Hands-On_Tutorial_Guide.pdf,可 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...
Blockly学习之文档阅读笔记
文档阅读来源--谷歌官网介绍: https://developers.google.com/blockly/guides/overview 概述一个用于Web.Android.iOS的可视化代码编辑 ...
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用
前言官方已经给出很好的文档了.在此本人总结下,方便以后查阅: GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - ...

Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）

Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）相关推荐

最新文章

热门文章