使用vue+vis.js實現關係圖的任意拖拽，編輯等功能

步驟

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中定義容器

<div id="network_id" class="network" style="height:800px"></div>

在script中，定義所需變量，這裏須要注意的是，network不能夠在data中進行定義，不然會出現拖拽節點的時候，其餘節點不跟隨變換位置的bug

  export default {

       name: 'home',

      data () {

             return {

                 nodes:[],

                 edges:[],

                // network:null,

                 container:null,

                 nodesArray:[

                     {id: 0, label: "0", group: 0},

                     {id: 1, label: "1", group: 0},

                     {id: 2, label: "2", group: 0},

                     {id: 3, label: "3", group: 1},

                     {id: 4, label: "4", group: 1},

                     {id: 5, label: "5", group: 1},

                     {id: 6, label: "6", group: 2},

                     {id: 7, label: "7", group: 2},

                     {id: 8, label: "8", group: 2},

                     {id: 9, label: "9", group: 3},

                     {id: 10, label: "10", group: 3},

                     {id: 11, label: "11", group: 3},

                     {id: 12, label: "12", group: 4},

                     {id: 13, label: "13", group: 4},

                     {id: 14, label: "14", group: 4},

                     {id: 15, label: "15", group: 5},

                     {id: 16, label: "16", group: 5},

                     {id: 17, label: "17", group: 5},

                     {id: 18, label: "18", group: 6},

                     {id: 19, label: "19", group: 6},

                     {id: 20, label: "20", group: 6},

                     {id: 21, label: "21", group: 7},

                     {id: 22, label: "22", group: 7},

                     {id: 23, label: "23", group: 7},

                     {id: 24, label: "24", group: 8},

                     {id: 25, label: "25", group: 8},

                     {id: 26, label: "26", group: 8},

                     {id: 27, label: "27", group: 9},

                     {id: 28, label: "28", group: 9},

                     {id: 29, label: "29", group: 9}

                 ],

                 edgesArray:[

                     {from: 1, to: 0,label:"hahah"},

                     {from: 2, to: 0},

                     {from: 4, to: 3},

                     {from: 5, to: 4},

                     {from: 4, to: 0},

                     {from: 7, to: 6},

                     {from: 8, to: 7},

                     {from: 7, to: 0},

                     {from: 10, to: 9},

                     {from: 11, to: 10},

                     {from: 10, to: 4},

                     {from: 13, to: 12},

                     {from: 14, to: 13},

                     {from: 13, to: 0},

                     {from: 16, to: 15},

                     {from: 17, to: 15},

                     {from: 15, to: 10},

                     {from: 19, to: 18},

                     {from: 20, to: 19},

                     {from: 19, to: 4},

                     {from: 22, to: 21},

                     {from: 23, to: 22},

                     {from: 22, to: 13},

                     {from: 25, to: 24},

                     {from: 26, to: 25},

                     {from: 25, to: 7},

                     {from: 28, to: 27},

                     {from: 29, to: 28},

                     {from: 28, to: 0}

                 ],

                 options:{},

                 data:{}

             }

         },

         methods:{

           init(){

               let this_ = this;

               this_.nodes = new Vis.DataSet(this_.nodesArray);

               this_.edges = new Vis.DataSet(this_.edgesArray);

               this_.container = document.getElementById('network_id');

               this_.data = {

                 nodes: this_.nodes,

                 edges: this_.edges

               };

               this_.options = {

                 autoResize: true,

                 groups:{

                     useDefaultGroups: true,

                     myGroupId:{

                     /*node options*/

                     }

                 },

                nodes: {

                    shape: 'dot',

                    size: 30,

                    font: {

                        size: 32,

                    },

                    borderWidth: 2

                },

                edges: {

                    width: 2,

                           smooth:{  //設置兩個節點以前的連線的狀態

                               enabled: false  //默認是true，設置爲false以後，兩個節點以前的連線始終爲直線，不會出現貝塞爾曲線

                           }

              },

                physics: { //計算節點以前斥力，進行自動排列的屬性

                    enabled: true, //默認是true，設置爲false後，節點將不會自動改變，拖動誰誰動。不影響其餘的節點

                    barnesHut: {

                        gravitationalConstant: -4000,

                        centralGravity: 0.3,

                        springLength: 120,

                        springConstant: 0.04,

                        damping: 0.09,

                        avoidOverlap: 0

                    }

                },

                interaction:{

                    hover:true,

                    dragNodes: true, //是否能拖動節點

                    dragView: true, //是否能拖動畫布

                    hover: true, //鼠標移事後加粗該節點和鏈接線

                    multiselect: true, //按 ctrl 多選

                    selectable: true, //是否能夠點擊選擇

                    selectConnectedEdges: true, //選擇節點後是否顯示鏈接線

                    hoverConnectedEdges: true, //鼠標滑動節點後是否顯示鏈接線

                    zoomView: true //是否能縮放畫布

                },

                manipulation: {  //該屬性表示能夠編輯，出現編輯操做按鈕

                    enabled: true

                }

            };

            this_.network = new Vis.Network(this_.container, this_.data, this_.options);

          },

          resetAllNodes() {

            let this_ = this;

            this_.nodes.clear();

            this_.edges.clear();

            this_.nodes.add(this_.nodesArray);

            this_.edges.add(this_.edgesArray);

            this_.data = {

                nodes: this_.nodes,

                edges: this_.edges

            };

            this_.network = new Vis.Network(this_.container, this_.data, this_.options);

          },

          resetAllNodesStabilize() {

            let this_ = this;

            this_.resetAllNodes();

            this_.network.stabilize();

          }

        },

        mounted(){

            this.init();

            this.network.on("click", function (params) {

                params.event = "[original event]";

                document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);

                console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));

            });

        }

    }

 

7.需求：出現選框，獲取選框中的選中的節點，如右圖；

已獲取到選框的位置

 

 

 ，節點的位置是隨機生成的，如何獲取？

 解答：

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