使用新數據重置D3強制佈局

Question

我正在使用d3強制指示圖佈局來顯示一些數據。當我雙擊節點旁邊的名稱時，我想用新數據重新渲染圖形。我發現了一個simular question on StackOverflow，但它並不適合我。關鍵似乎是我打電話的force.start();方法。這是我編碼到目前爲止。它縮減到絕對最小值。

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(); 

這就要求雙點擊行爲的部分是在這裏：

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

redraw();有新的數據，應該只是我的函數，再次繪製圖形。對我來說，雙擊節點似乎只能工作一次。甚至它們也會繪製舊的數據。我準備了一份fiddle demo，包括我迄今爲止的一切。
我在重新渲染圖表時做錯了什麼？

Answer 1

在繪製函數中渲染之前，您需要刪除節點和鏈接。

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. 

工作代碼here。