使用vue+vis.js实现关系图的任意拖拽，编辑等功能

谁借莪１个温暖的怀抱￠ 2023-08-17 16:33 50阅读 0赞

## 步骤 ##

1.  根据官网，进行安装
2.  Npm install vis
3.  装好之后，在main.js（获取其他名称，入口的js文件即可引入vis的css）

import 'iview/dist/styles/iview.css'

1.  在关系图的页面引入vis

import vis from 'vis'

1.  html中定义容器

1.  在script中，定义所需变量，这里需要注意的是，network不可以在data中进行定义，否则会出现拖拽节点的时候，其他节点不跟随变换位置的bug
2.    export default \{
3.          name: 'home',
4.         data () \{
5.  10.             return \{
6.  11.                 nodes:\[\],
7.  12.                 edges:\[\],
8.  13.                 // network:null,
9.  14.                 container:null,
10. 15.                 nodesArray:\[
11. 16.                     \{id: 0, label: "0", group: 0\},
12. 17.                     \{id: 1, label: "1", group: 0\},
13. 18.                     \{id: 2, label: "2", group: 0\},
14. 19.                     \{id: 3, label: "3", group: 1\},
15. 20.                     \{id: 4, label: "4", group: 1\},
16. 21.                     \{id: 5, label: "5", group: 1\},
17. 22.                     \{id: 6, label: "6", group: 2\},
18. 23.                     \{id: 7, label: "7", group: 2\},
19. 24.                     \{id: 8, label: "8", group: 2\},
20. 25.                     \{id: 9, label: "9", group: 3\},
21. 26.                     \{id: 10, label: "10", group: 3\},
22. 27.                     \{id: 11, label: "11", group: 3\},
23. 28.                     \{id: 12, label: "12", group: 4\},
24. 29.                     \{id: 13, label: "13", group: 4\},
25. 30.                     \{id: 14, label: "14", group: 4\},
26. 31.                     \{id: 15, label: "15", group: 5\},
27. 32.                     \{id: 16, label: "16", group: 5\},
28. 33.                     \{id: 17, label: "17", group: 5\},
29. 34.                     \{id: 18, label: "18", group: 6\},
30. 35.                     \{id: 19, label: "19", group: 6\},
31. 36.                     \{id: 20, label: "20", group: 6\},
32. 37.                     \{id: 21, label: "21", group: 7\},
33. 38.                     \{id: 22, label: "22", group: 7\},
34. 39.                     \{id: 23, label: "23", group: 7\},
35. 40.                     \{id: 24, label: "24", group: 8\},
36. 41.                     \{id: 25, label: "25", group: 8\},
37. 42.                     \{id: 26, label: "26", group: 8\},
38. 43.                     \{id: 27, label: "27", group: 9\},
39. 44.                     \{id: 28, label: "28", group: 9\},
40. 45.                     \{id: 29, label: "29", group: 9\}
41. 46.                 \],
42. 47.                 edgesArray:\[
43. 48.                     \{from: 1, to: 0,label:"hahah"\},
44. 49.                     \{from: 2, to: 0\},
45. 50.                     \{from: 4, to: 3\},
46. 51.                     \{from: 5, to: 4\},
47. 52.                     \{from: 4, to: 0\},
48. 53.                     \{from: 7, to: 6\},
49. 54.                     \{from: 8, to: 7\},
50. 55.                     \{from: 7, to: 0\},
51. 56.                     \{from: 10, to: 9\},
52. 57.                     \{from: 11, to: 10\},
53. 58.                     \{from: 10, to: 4\},
54. 59.                     \{from: 13, to: 12\},
55. 60.                     \{from: 14, to: 13\},
56. 61.                     \{from: 13, to: 0\},
57. 62.                     \{from: 16, to: 15\},
58. 63.                     \{from: 17, to: 15\},
59. 64.                     \{from: 15, to: 10\},
60. 65.                     \{from: 19, to: 18\},
61. 66.                     \{from: 20, to: 19\},
62. 67.                     \{from: 19, to: 4\},
63. 68.                     \{from: 22, to: 21\},
64. 69.                     \{from: 23, to: 22\},
65. 70.                     \{from: 22, to: 13\},
66. 71.                     \{from: 25, to: 24\},
67. 72.                     \{from: 26, to: 25\},
68. 73.                     \{from: 25, to: 7\},
69. 74.                     \{from: 28, to: 27\},
70. 75.                     \{from: 29, to: 28\},
71. 76.                     \{from: 28, to: 0\}
72. 77.                 \],
73. 78.                 options:\{\},
74. 79.                 data:\{\}
75. 80.             \}
76. 81.         \},
77. 82.         methods:\{
78. 83.           init()\{
79. 84.               let this\_ = this;
80. 85.               this\_.nodes = new Vis.DataSet(this\_.nodesArray);
81. 86.               this\_.edges = new Vis.DataSet(this\_.edgesArray);
82. 87.               this\_.container = document.getElementById('network\_id');
83. 88.               this\_.data = \{
84. 89.                 nodes: this\_.nodes,
85. 90.                 edges: this\_.edges
86. 91.               \};
87. 92.               this\_.options = \{
88. 93.                 autoResize: true,
89. 94.                 groups:\{
90. 95.                     useDefaultGroups: true,
91. 96.                     myGroupId:\{
92. 97.                     /\*node options\*/
93. 98.                     \}
94. 99.                 \},
95.                 nodes: \{
96.                     shape: 'dot',
97.                     size: 30,
98.                     font: \{
99.                         size: 32,
100.                     
101.                     \},
102.                     borderWidth: 2
103.                 \},
104.                 edges: \{
105.                     width: 2,

smooth:\{  //设置两个节点之前的连线的状态

enabled: false  //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线

1.                \},
2.                  physics: \{ //计算节点之前斥力，进行自动排列的属性
3.                      enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
4.                      barnesHut: \{
5.                          gravitationalConstant: -4000,
6.                          centralGravity: 0.3,
7.                          springLength: 120,
8.                          springConstant: 0.04,
9.                          damping: 0.09,
10.                         avoidOverlap: 0
11.                     \}
12.                 \},
13.                 interaction:\{
14.                     hover:true,
15.                     dragNodes: true, //是否能拖动节点
16.                     dragView: true, //是否能拖动画布
17.                     hover: true, //鼠标移过后加粗该节点和连接线
18.                     multiselect: true, //按 ctrl 多选
19.                     selectable: true, //是否可以点击选择
20.                     selectConnectedEdges: true, //选择节点后是否显示连接线
21.                     hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
22.                     zoomView: true //是否能缩放画布
23.                 \},
24.                 manipulation: \{  //该属性表示可以编辑，出现编辑操作按钮
25.                     enabled: true
26.                 \}
27.             \};
28.             this\_.network = new Vis.Network(this\_.container, this\_.data, this\_.options);
29.           \},
30.           resetAllNodes() \{
31.             let this\_ = this;
32.             this\_.nodes.clear();
33.             this\_.edges.clear();
34.             this\_.nodes.add(this\_.nodesArray);
35.             this\_.edges.add(this\_.edgesArray);
36.             this\_.data = \{
37.                 nodes: this\_.nodes,
38.                 edges: this\_.edges
39.             \};
40.             this\_.network = new Vis.Network(this\_.container, this\_.data, this\_.options);
41.           \},
42.           resetAllNodesStabilize() \{
43.             let this\_ = this;
44.             this\_.resetAllNodes();
45.             this\_.network.stabilize();
46.           \}
47.         \},
48.         mounted()\{
49.             this.init();
50.             this.network.on("click", function (params) \{
51.                 params.event = "\[original event\]";
52.                 document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
53.                 console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
54.             \});
55.         \}
56.     \}

7.需求：出现选框，获取选框中的选中的节点，如右图；

已获取到选框的位置![1012801-20190927162343506-1717195282.png][]

，节点的位置是随机生成的，如何获取？

解答：

function returnPos(params)\{

var nodePosCanvas = \[\],selectNodes=\[\],nodePosDom=\[\];

// 通过network.getPositions(节点id)，来获取到随机生成的节点的canvas的坐标

$.each(nodes.\_data,function(index,item)\{

var obj=network.getPositions(item.id)\[item.id\];

obj.id=item.id;

nodePosCanvas.push(obj)

\});

// 通过network.canvasToDOM(\{x:x,y:y\}),将获取到的canvas坐标转化为DOM坐标

$.each(nodePosCanvas,function(indexpos,itempos)\{

var obj=network.canvasToDOM(\{x:itempos.x,y:itempos.y\});

obj.id=itempos.id;

nodePosDom.push(obj)

\});

// 通过对上下左右的限制，获取到选中的节点

$.each(nodePosDom,function(indexposDom,itemposDom)\{

if((itemposDom.x>params.left||itemposDom.x == params.left) && (itemposDom.x<params.right||itemposDom.x == params.right))\{

if((itemposDom.y>params.top||itemposDom.y == params.top) && (itemposDom.y<params.bottom||itemposDom.y == params.bottom))\{

selectNodes.push(itemposDom)

\});

## 实现vis.js中的编辑节点，增加节点，删除节点，增加边缘的操作 ##

Vis的option中直接有属性就可以进行这些操作

manipulation: \{  //该属性表示可以编辑，出现编辑操作按钮

enabled: false,

initiallyActive:true,

addNode:function(nodeData,callback)\{  对增加节点的操作，一般使用默认的话就不需要写这个函数

nodesArrayCopy.forEach(item=>\{

if(item.status)\{

delete item.status;

\});

nodesArrayCopy.push(\{id:nodesArray.length, label:"I'm new!",group:0,status:"lastest"\})

nodes.add(\{id:nodesArray.length, label:"I'm new!",x:nodeData.x,y:nodeData.y\});

\},

那如果不想使用默认的增加节点功能呢，需要使用什么方法进行增加

var nodes = new vis.DataSet(nodesArray);

nodes.add(\{id: 1001, x: x, y:y, label: name, group:group, value: value,  physics:false\});

使用nodes.add()方法进行添加

想要增加边缘edge

var edges = new vis.DataSet(edgesArray);

edges.add(\{

id: edge.id,

arrows:'to',

from: edge.fromNodeId,

to: edge.toNodeId,

label:edge.label,

font:\{align:"middle"\},

length:150

\});

想要对已有的节点进行更新

nodes.update(\[\{id:id, group:group\}\]);

具体参数参考文档

过network.canvasToDOM(\{x:x,y:y\}),将获取到的canvas坐标转化为DOM坐标

\[Guò network.CanvasToDOM(\{x:X,y:Y\}), jiāng huòqǔ dào de canvas zuòbiāo zhuǎnhuà wéi DOM zuòbiāo\]

Through network.canvasToDOM (\{x: x, y: y\}), the acquired coordinates into the canvas coordinate DOM

转载于:https://www.cnblogs.com/fyjz/p/11598720.html

[1012801-20190927162343506-1717195282.png]: /images/20230810/c6b8221ef7e049baaff7d407f5bbaa05.png

使用vue+vis.js实现关系图的任意拖拽，编辑等功能

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关使用vue+vis.js实现关系图的任意拖拽，编辑等功能

相关 vue轮播图拖拽放置任意位置功能实现（拖动改变顺序）

相关使用jQuery实现div可拖拽功能

相关 easyUI拖拽功能讲解以及多选拖拽的实现

相关 html5实现文件的拖拽功能

相关使用dropzone实现文件拖拽上传功能

相关运用js实现图层拖拽的功能

相关 WinForm实现简单的拖拽功能(C#)

相关原生js实现拖拽功能

相关 vue实现表格拖拽并且可编辑