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 }