vis.js 在節點數 > 40 時停止響應

Question

最近集成vis.js用於數據visualisation vis.js ，我的問題是對於node count < 40 ，它工作正常，但增加節點數，我在mozilla上收到以下錯誤， chrome只是停止響應。

總體影響是它減慢了頁面加載時間，甚至在加載頁面后，滾動到其他部分或網頁就像烏龜一樣（頁面中多個 div 的一個 div 垂直對齊）

下面是我的 js，它執行網絡部分

try {

     // response : response from backend API  
     // Create graph on UI
     graph_nodes = response.graph_data["nodes"]
     graph_edges = response.graph_data["edges"]
     // create an array with nodes
     var nodes = new vis.DataSet(graph_nodes);
     // create an array with edges
     var edges = new vis.DataSet(graph_edges);

     // create a network
     var container = document.getElementById('network_visualisation');

     // provide the data in the vis format
     var data = {
        nodes: nodes,
        edges: edges
     };
     var options = {
                interaction:{
                    hover: true,
                    hoverConnectedEdges: true,
                    multiselect: false,
                    selectable: true,
                    selectConnectedEdges: true,
                    tooltipDelay: 300,
                    zoomView: true
                },
                nodes:{
                    color: {
                      border: 'black',
                      background: 'white',
                      highlight: {
                        border: 'black',
                        background: '#ccc'
                      },
                      hover: {
                        border: '#2B7CE9',
                        background: '#D2E5FF'
                      }
                    },
                    labelHighlightBold: true,
                    mass: 5,
                    physics: true,
                    scaling: {
                      min: 10,
                      max: 30,
                      label: {
                        enabled: true,
                        min: 14,
                        max: 30,
                        maxVisible: 30,
                        drawThreshold: 5
                      },
                    },
                    shadow:{
                      enabled: false,
                    },
                    shape: 'circle',
                    shapeProperties: {
                      borderDashes: false, // only for borders
                      borderRadius: 6,     // only for box shape
                      interpolation: false,  // only for image and circularImage shapes
                      useImageSize: false,  // only for image and circularImage shapes
                      useBorderWithImage: false  // only for image shape
                    },
                  },
                edges:{
                    arrows: {
                      to:     {enabled: true, scaleFactor:1, type:'arrow'},
                    },
                    arrowStrikethrough: false,
                    color: {
                      color:'#E7EAFF',
                      highlight:'#9EAAFC',
                      hover: '#2944FB',
                      inherit: "from",
                      opacity:1.0
                    },
                    dashes: true,
                    },
         };

     // initialize your network!
     var network = new vis.Network(container, data, options);
     network.on("stabilizationProgress", function(params) {
        var maxWidth = 496;
        var minWidth = 20;
        var widthFactor = params.iterations/params.total;
        var width = Math.max(minWidth,maxWidth * widthFactor);

        document.getElementById('bar').style.width = width + 'px';
        document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
    });
    network.once("stabilizationIterationsDone", function() {
        document.getElementById('text').innerHTML = '100%';
        document.getElementById('bar').style.width = '496px';
        document.getElementById('loadingBar').style.opacity = 0;
        // really clean the dom element
        setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
    });
     }
catch (e) {
   console.error(e); // pass exception object to error handler
}

它正在處理的示例數據：

  "graph_data": {
    "nodes": [
      {
        "id": "SOMEDATADV3d92db1483600076",
        "label": "SOMEDATA..0076"
      },
      {
        "id": "SOMEDATADID49e581483290782",
        "label": "SOMEDATA..0782"
      },
      {
        "id": "SOMEDATADV3777591473346353",
        "label": "SOMEDATA..6353"
      },
      {
        "id": "SOMEDATADAD5fb491473346381",
        "label": "SOMEDATA..6381"
      },
      {
        "id": "SOMEDATADV39de121478512314",
        "label": "SOMEDATA..2314"
      },
      {
        "id": "SOMEDATADV39a60d1482924361",
        "label": "SOMEDATA..4361"
      }
    ],
    "edges": [
      {
        "to": "SOMEDATADID49e581483290782",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADV3777591473346353",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADAD5fb491473346381",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV3777591473346353",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADV39de121478512314",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label3"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADAD5fb491473346381",
        "from": "SOMEDATADV3777591473346353",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADV3777591473346353",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADAD5fb491473346381",
        "label": "some_label1"
      }
    ]
  },

有沒有其他人面臨同樣的問題？

Answer 1

這里有 100 個節點和 50 個隨機邊，沒有選項，也沒有關於stabilizationProgress或stabilizationIterationsDone事件處理。 如果您在此代碼段上獲得了合理的性能，我想可以通過事件處理或選項配置來隔離問題：

 // fake up 100 nodes plus 50 randomised edges var nodes = [], edges = []; console.log('start random graph data: ' + new Date); // create nodes and edges for (var i = 0; i < 100; i++) { nodes.push({ "id": "id" + i.toString(), "label": "node" + i.toString() }); } for (var i = 0; i < 100; i += 2) { var randId = "id" + (Math.floor(Math.random() * 99) + 1).toString(); edges.push({ "to": randId, "from": "id" + i.toString(), "label": "edge" + i.toString() }) } // vis data sets console.log('start graph initialisation: ' + new Date); var visNodes = new vis.DataSet(nodes); var visEdges = new vis.DataSet(edges); // network div var container = document.getElementById('network_visualisation'); // provide the data in the vis format var data = { nodes: visNodes, edges: visEdges }; // initialize your network! console.log('instantiate graph: ' + new Date); var network = new vis.Network(container, data, {});

 #network_visualisation { height: 320px; width: 640px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script> <div id="network_visualisation"></div>