Question

最近对数据vis.js进行了整合visualisation，我的问题是对于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没有事件处理。如果你在这个片段上获得了合理的性能，我想这个问题可以通过事件处理或选项配置来隔离：

＆＃13;

// 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, {});

＆＃13;

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

＆＃13;

<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>

＆＃13;

vis.js停止响应节点计数＆gt; 40

1 个答案: