Rerender D3 Force directed Layout with new data

Question

I'm using the d3 force directed graph layout to display some data. When I double click a name next to a node I want to rerender the graph with new data. I found a simular question on StackOverflow, but it didn't really work out for me. The key there seems to be the force.start(); method which I'm calling as well. This is what I coded so far. It's shortened to the absolut minimum.

var height =  600;
var width = 800;
var color = d3.scale.category20();
var svg = d3.select('body').append('svg').attr('width', width).attr('height',
        height).attr("pointer-events", "all").append("g").append("g");
svg.append("rect").attr("class", "overlay").attr("width", width).attr("height", height);

function draw(json) {
    var force = self.force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .gravity(.05)
        .distance(150)
        .charge(-100)
        .size([width, height])
        .start();

    var link = svg.selectAll(".link").data(json.links).enter().append("line")
            .attr("class", "link").style("stroke-width", 1);

    var gnodes = svg.selectAll('g.gnode').data(json.nodes).enter().append('g').classed('gnode', true);


    var node = gnodes.append("circle").attr("class", "node").attr("r", 5)
            .style("fill", function(d) {
                return color(d.group);
            });

    var labels = gnodes.append("text").text(function(d) {
        return d.name;
    }).attr("dx", 5).attr("dy", ".35em").on('dblclick', function(d){
        redraw();
    });
    gnodes.selectAll("circle.node").on("click", function() {
        d3.select(this);
    });
    force.on("tick", tick);

    function tick() {
      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; });
      gnodes.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }
force.start();
};


function invoke(){
    inputString = {
            "nodes":[
                     {"concept":"man","name":"John","id":0,"shortname":"","group":2},
                     {"concept":"woman","name":"Mia","id":1,"shortname":"","group":6},
                     {"concept":"child","name":"Harry","id":2,"shortname":"","group":7},
                     {"concept":"child","name":"Sally","id":3,"shortname":"","group":7},
                     {"concept":"old women","name":"Judith","id":4,"shortname":"","group":8},
                     {"concept":"old man","name":"Lionel","id":5,"shortname":"","group":7}
                  ],
                  "links":[
                     {"source":0,"target":1,"relation":"married"},
                     {"source":0,"target":2,"relation":"father"},
                     {"source":1,"target":2,"relation":"mother"},
                     {"source":0,"target":3,"relation":"father"},
                     {"source":1,"target":3,"relation":"mother"},
                     {"source":5,"target":2,"relation":"grandfather"},
                     {"source":5,"target":3,"relation":"grandfather"},
                     {"source":4,"target":2,"relation":"grandmother"},
                     {"source":4,"target":3,"relation":"grandmother"},
                     {"source":5,"target":1,"relation":"father"},
                     {"source":4,"target":1,"relation":"mother"}
                  ]
             };
    draw(inputString);
}

function redraw(){
    inputString = {
            "nodes":[
                     {"concept":"man","name":"Alan","id":0,"shortname":"","group":2},
                     {"concept":"woman","name":"Judith","id":1,"shortname":"","group":6},
                     {"concept":"child","name":"Jack","id":2,"shortname":"","group":7},
                     {"concept":"child","name":"Rosana","id":3,"shortname":"","group":7},
                     {"concept":"old women","name":"Evelyn","id":4,"shortname":"","group":8},
                     {"concept":"old man","name":"Charlie","id":5,"shortname":"","group":7}
                  ],
                  "links":[
                     {"source":0,"target":1,"relation":"married"},
                     {"source":0,"target":2,"relation":"father"},
                     {"source":1,"target":2,"relation":"mother"},
                     {"source":0,"target":3,"relation":"father"},
                     {"source":1,"target":3,"relation":"mother"},
                     {"source":5,"target":2,"relation":"grandfather"},
                     {"source":5,"target":3,"relation":"grandfather"},
                     {"source":4,"target":2,"relation":"grandmother"},
                     {"source":4,"target":3,"relation":"grandmother"},
                     {"source":5,"target":1,"relation":"father"},
                     {"source":4,"target":1,"relation":"mother"}
                  ]
             };
    draw(inputString);
}

var inputString = undefined;

invoke();

The part which calls the double click behaviour is here:

var labels = gnodes.append("text").text(function(d) {
        return d.name;
    }).attr("dx", 5).attr("dy", ".35em").on('dblclick', function(d){
        redraw();
});

redraw(); has new data and should just call my function that draws the graph again. To me it seems that double clicking a node only works once. And even them it draw the old data. I prepared a fiddle demo, with everything I have so far.
What am I doing wrong in rerendering the graph?

Answer 1

You will need to remove the nodes and links before rendering in the draw function.

function draw(json) {
  svg.selectAll(".link").remove();//add this to remove the links
  svg.selectAll(".gnode").remove();//add this to remove the nodes
...your old code.

Working code here.