javascript - D3 Force Directed Graph Redraw with Less Edges -

i trying add threshold force directed graph, include edges between vertices that above threshold store in map. slider partly working, , edges removed.

however, after edges removed, graph stops animating, , there error in console when calling force.start(). need add unique ids? in jsfiddle linked, not that, , slider works no problems.

thanks! there multiple answers on stackoverflow similar questions, , have used them fix obvious errors (such d3.js: "cannot read property 'weight' of undefined" when manually defining both nodes , links force layout), down one. using example: http://jsfiddle.net/simonraper/tdhgx/?utm_source=website&utm_medium=embed&utm_campaign=tdhgx website: http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/

i send relevant js.

         function draw(occurence) {         var ratio = window.devicepixelratio || 1;          var width = math.min(700,0.8*$(window).width()), height = 700;         var color = d3.scale.category20();         var svg = d3.select("#" + occurence).append("svg")             .attr("width", width)             .attr("height", height)             .attr("id", "#" + occurence + "svg");          d3.json(occurence + ".json", function(error, graph) {           if (error) throw error;            var force = d3.layout.force()             .charge(-120)             .linkdistance(50)             .size([width, height]);            force               .nodes(graph.nodes)               .links(graph.links)               .start();           if (occurence == "occurrences3") {             console.log(graph.nodes);             console.log(graph.links);           }            var graphrec=json.parse(json.stringify(graph)); //add line            var link = svg.selectall(".link")               .data(graph.links)             .enter().append("line")               .attr("class", "link")               .style("stroke-width", function(d) { return math.sqrt(d.value); });            var node = svg.selectall(".node")               .data(graph.nodes)             .enter().append("circle")               .attr("class", "node")               .attr("r", 5)               .style("fill", function(d) { return color(d.group); })               .call(force.drag);            node.append("title")               .text(function(d) { return d.name; });            force.on("tick", function() {             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; });            node.attr("cx", function(d) { return d.x; })               .attr("cy", function(d) { return d.y; });           });            node.on("dblclick", function(d) {             $("#uncuratedgraphsmodal").modal();             var d = d3.select(this).node().__data__;             var name = d.name;             $("#uncuratedgraphsmodalheader").text("node " + name);             $("#uncuratedgraphsmodalbody").empty();             var edge_by_person = edge_by_person_per_threshold[occurence + "edge_by_person"];             var edges = edge_by_person[name];             edges.sort(function(a,b) {                 return a.dest - b.dest;             });             $.each(edges, function(edge) {                 var new_edge = $("<li>");                 new_edge.text("neighbor: " + edges[edge].dest + ", token: " + edges[edge].token);                 $("#uncuratedgraphsmodalbody").append(new_edge);             });           });           $("#" + occurence + "thresholdslider").on('input', function(thresh) {             threshold($("#" + occurence + "thresholdslider").val());           });           //adjust threshold           function threshold(thresh) {               var edge_by_person = edge_by_person_per_threshold_unweighted[occurence + "edge_by_person_unweighted"];               graph.links.splice(0, graph.links.length);               (var = 0; < graphrec.links.length; i++) {                 var source = graphrec.links[i].source.name;                 var dest = graphrec.links[i].target.name;                 var value = -1;                 var edges = edge_by_person[source];                 var found = false;                 (var edge = 0; !found && edge < edges.length; edge++) {                   if (dest == edges[edge].dest) {                     value = edges[edge].token;                     found = true;                   }                 }                 if (value >= thresh) {                   graph.links.push({                     source: graphrec.links[i].source.name,                     target: graphrec.links[i].target.name,                     value: graphrec.links[i].value                   });                 }               }               restart();           }           //restart visualisation after node , link changes           function restart() {             link = link.data(graph.links);             link.exit().remove();             link.enter().insert("line", ".node").attr("class", "link")             .style("stroke-width", function(d) { return math.sqrt(d.value); });              node = node.data(graph.nodes);             node.enter().insert("circle", ".cursor").attr("class", "node")               .attr("r", 5)               .style("fill", function(d) { return color(d.group); })               .call(force.drag);             force               .nodes(node)               .links(link)               .start();           }         });       } 

this js added jsfiddle linked:

this understanding: if have same nodes, , remove few edges graph.links, can't force.start()? when directly copy restart() function, links broken, , none redrawn, though doing console.log(graph.links) shows correct links to-redraw.

i believe it's talking wrong nodes @ point, maybe wrong svg. have multiple svgs on same page.