Question

我正在使用D3JS来构建力导向图。在预版本中，我可以例如制作1200个节点和3717个链接图，而没有任何性能问题。但是在我的脚本的干净版本中，580个节点和649个链接图非常慢。

在第一个版本中，图形的创建以及节点和链接的样式是同时进行的。在第二个版本中，我需要动态修改节点的样式，例如在缩小时或者单击按钮时隐藏小节点。为此，我将我的脚本分为4个函数：

选择要在force-system中使用的节点和链接
启动强制系统
选择要显示的节点
要显示的节点样式

有了这个，我必须要说：我添加或删除节点，所以我调用所有函数或者我放大或缩小所以我调用最后两个只改变用户看到的内容。

这种分离是否可能导致性能不足？我不这么认为，因为当tick函数运行时，当所有这些函数都结束时会出现问题。但这是两个版本之间唯一的变化。

先谢谢你的帮助，对不起的英语感到抱歉！

编辑1：代码

选择要在强制系统中使用的节点和链接

function choiceNodesToUseForForce(){
//First we clean previous selection
for(itCN1=0;itCN1<nodesUnDisplayed.length;itCN1++){
    nodesUnDisplayed[itCN1].isUsed = false;
}
for(itCN1=0;itCN1<linksUnDisplayed.length;itCN1++){
    linksUnDisplayed[itCN1].isUsed = false;
}
usedLinks = new Array();
usedNodes = new Array();

for(itCNAU1=0;itCNAU1<linksUnDisplayed.length;itCNAU1++){
    lien = linksUnDisplayed[itCNAU1];
    //We used a link if one of his nodes is open (=focused)
    if((lien.source.isFocused || lien.target.isFocused) && lien.time <= time[1] && lien.time >= time[0] && !lien.isUsed){
        usedLinks.push(lien);
        lien.isUsed = true;
        if(!lien.source.isUsed){
            usedNodes.push(lien.source);
            lien.source.isUsed = true;
        }
        if(!lien.target.isUsed){
            usedNodes.push(lien.target);
            lien.target.isUsed = true;
        }
    }
  }
}

启动强制系统

function startingForce(){
force.stop();
force.nodes(usedNodes).links(usedLinks);
force.start();
}

选择要显示的节点

function choiceNodesToShow(){
//First we clean the previous selection
for(itCN1=0;itCN1<nodesUnDisplayed.length;itCN1++){
    nodesUnDisplayed[itCN1].isDisplayed = false;
}
for(itCN1=0;itCN1<linksUnDisplayed.length;itCN1++){
    linksUnDisplayed[itCN1].isDisplayed = false;
}

showedNodes = new Array();
showedLinks = new Array();

for(itCN1=0;itCN1<usedLinks.length;itCN1++){
    lien = liensUtilises[itCN1];
    //We show a link if : his two nodes are displayed
    if(lien.source.size > sizeLimite && lien.target.size > sizeLimite && !lien.isDisplayed){
        liensAAfficher.push(lien);
        //Add of nodes
        if(!lien.source.isDisplayed){
            showedNodes.push(lien.source);
            lien.source.isDisplayed = true;
        }
        if(!lien.target.isDisplayed){
            showedNodes.push(lien.target);
            lien.target.isDisplayed = true;
        }
     }
  }
}

要显示的节点样式

function styleNoeudsAAfficher(){
d3.selectAll('.node').remove();
d3.selectAll('.link').remove();
link = svg.selectAll('.link');
node = svg.selectAll('.node');

node = node.data(showedNodes, function(d){ return d.name;});
if(mode == "normal"){
    user.enter().append("circle") //Idem lien
        .attr("class", function(d) {return "node "+d.id+d.name;})
        .attr("r", function(d){ return d.size;})
        .attr("cx", function(d) {return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("x", function(d) { return d.x-d.size/2; })
        .attr("y", function(d) { return d.y-d.size/2; })
        .attr("fill", function(d){return color(d.community);})
        .style("stroke-width", 1)
        .style("stroke", "black")
        .style("cursor", "pointer")
        .on("click", function(d){ clicNode(d);})
        .call(force.drag)
        .append("title")
            .text(function(d){return d.name;});


user.exit().remove();

link = link.data(showedLinks, function(d) { return d.sourceId + "-" + d.targetId; });

link.enter().insert("line", ".node")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; })
    .style("stroke-width", 1)
    .style("stroke", "#848484")
    .append("title")
        .text(function(d){return d.source.name+" - "+d.target.name;})
link.exit().remove(); //On supprime les liens qui ont disparus
}

d3js的性能下降

0 个答案: