本文介绍了如何使用Vue.js结合Vis.js库创建关系图，并实现节点的编辑、增加、删除及边的添加等功能。首先通过npm安装vis库，然后在Vue组件中导入并设置容器。在数据部分定义了节点和边的数据，通过vis.DataSet创建数据集，并使用vis.Network创建关系图。此外，还展示了如何监听点击事件以及获取选中节点的方法。
步骤
- 根据官网，进行安装
- Npm install vis
- 装好之后，在main.js（获取其他名称，入口的js文件即可引入vis的css）
import 'iview/dist/styles/iview.css'
- 在关系图的页面引入vis
import vis from 'vis'
- html中定义容器
<div id="network_id" class="network" style="height:800px"></div>
- 在script中，定义所需变量，这里需要注意的是，network不可以在data中进行定义，否则会出现拖拽节点的时候，其他节点不跟随变换位置的bug
- export default {
- name: 'home',
- data () {
- 10. return {
- 11. nodes:[],
- 12. edges:[],
- 13. // network:null,
- 14. container:null,
- 15. nodesArray:[
- 16. {id: 0, label: "0", group: 0},
- 17. {id: 1, label: "1", group: 0},
- 18. {id: 2, label: "2", group: 0},
- 19. {id: 3, label: "3", group: 1},
- 20. {id: 4, label: "4", group: 1},
- 21. {id: 5, label: "5", group: 1},
- 22. {id: 6, label: "6", group: 2},
- 23. {id: 7, label: "7", group: 2},
- 24. {id: 8, label: "8", group: 2},
- 25. {id: 9, label: "9", group: 3},
- 26. {id: 10, label: "10", group: 3},
- 27. {id: 11, label: "11", group: 3},
- 28. {id: 12, label: "12", group: 4},
- 29. {id: 13, label: "13", group: 4},
- 30. {id: 14, label: "14", group: 4},
- 31. {id: 15, label: "15", group: 5},
- 32. {id: 16, label: "16", group: 5},
- 33. {id: 17, label: "17", group: 5},
- 34. {id: 18, label: "18", group: 6},
- 35. {id: 19, label: "19", group: 6},
- 36. {id: 20, label: "20", group: 6},
- 37. {id: 21, label: "21", group: 7},
- 38. {id: 22, label: "22", group: 7},
- 39. {id: 23, label: "23", group: 7},
- 40. {id: 24, label: "24", group:
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
