vis.js停止节点计数响应> 40

近日集成vis.js数据visualisation，我的问题是，node count < 40，它工作正常，但增加节点数和我得到mozilla下面的错误，chrome只是停止响应。vis.js停止节点计数响应> 40

总体影响是，它减慢了页面加载时间或者甚至加载页面之后，滚动到其它部分或所述网页是像乌龟（其多个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" 
     } 
    ] 
    },

是否有其他人面临同样的问题？

来源

2017-01-09 NoobEditor

这里有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>

来源

2017-02-20 12:25:56

vis.js停止节点计数响应> 40

回答

相关问题