d3.js - Degraded performance on d3js -
i'm using d3js building force-directed graph. in pre-version, can example make 1200 nodes , 3717 links graph without problem of performance. in clean version of script, 580 nodes , 649 links graph very slow.
in first version, creation of graph , style of nodes , links made in same time. in second version version, need modify dynamically style of nodes, example hiding little nodes when zoom out or when click on button. doing this, separate script in 4 functions :
- choice of nodes , links use in force-system
- start of force system
- choice of nodes show
- style of nodes show
with this, have case : add or remove nodes call functions or zoom in or out call last 2 change user see.
is possible separation cause of lack of performance ? don't think because problems occur when of these functions over, when tick function running. it's change between 2 versions.
thanks in advance help, , sorry poor english !
edit 1 : code
choice of nodes , links use in force-system
function choicenodestouseforforce(){ //first 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 link if 1 of nodes 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; } } } }
starting force-system
function startingforce(){ force.stop(); force.nodes(usednodes).links(usedlinks); force.start(); }
choice of nodes show
function choicenodestoshow(){ //first clean 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 link if : 2 nodes 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; } } } }
style of nodes show
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 }
Comments
Post a Comment