2

我正在使用 jsPlumb 库来绘制（连接）一些 div。div 的数量是动态的，最多可以达到 2000 个 div。我正在使用以下递归方法来画线：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
}

我的问题是，对于大于 100 的数字，加载时间非常长，并且有时谷歌浏览器会弹出一个关闭选项卡选项。我可以对我的方法进行任何改进还是 jsPlumb 这么慢？

4

1 回答 1

1

就像 Rich 已经提到的那样，您必须使用

jsPlumb.setSuspendDrawing();

方法

尝试这个：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    //start of suspend drawing
    jsPlumb.setSuspendDrawing(true);
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
    //end of suspend drawing
    jsPlumb.setSuspendDrawing(false,true);
}
于 2014-02-13T14:53:18.807 回答