title: Updating links on a force directed graph from dynamic json data
body: <p>I am new to D3 and working on a force directed graph where the json data is dynamic. I am able to change the force graph upon receiving new data but that happens with a springing effect. The code that creates my force graph is :</p>
  
  <pre><code>&lt;div class="graph"&gt;&lt;/div&gt;
  &lt;script&gt;
  var w = 660,
      h = 700,
      r = 10;
  var vis = d3.select(".graph")
      .append("svg:svg")
      .attr("width", w)
      .attr("height", h)
      .attr("pointer-events", "all")
      .append('svg:g')
      .call(d3.behavior.zoom().on("zoom", redraw))
      .append('svg:g');
  vis.append('svg:rect')
      .attr('width', w)
      .attr('height', h)
      .attr('fill', 'rgba(1,1,1,0)');
  function redraw() {
      console.log("here", d3.event.translate, d3.event.scale);
      vis.attr("transform", "translate(" + d3.event.translate + ")" +
                            " scale(" + d3.event.scale + ")");
  };  
  
  var force = d3.layout.force()
      .gravity(.05)
      .charge(-200)
      .linkDistance( 260 )
      .size([w, h]);
  
  var svg = d3.select(".text")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
  
  d3.json(graph, function(json) {
  
      var nodeList = json.nodes;
      var link = vis.selectAll("line")
          .data(json.links)
         .enter()
          .append("line")
          .attr("stroke-opacity", function(d) {
              if(d.label == 'is a') {
                  return '0.8';
              } else {
                  return '0.2';
              };
          })
          .attr("stroke-width", function(d) {
              if(d.value !== null) {
                  return d.value;
              } else {
                  return 2;
              };
          })
          .style("stroke", function(d) {
              if(d.color !== null) {
                  return d.color;
              };
          })
          .on("mouseover", function() {
              d3.select(this)
                  .style("stroke", "#999999")
                  .attr("stroke-opacity", "1.0");
          })
          .on("mouseout", function() {
              d3.select(this)
                  .style("stroke", function(d) {
                      if(d.color !== null) {
                          return d.color;
                      };
                  })
                  .attr("stroke-opacity", function(d) {
                      if(d.label == 'is a') {
                          return '0.8';
                      } else {
                          return '0.2';
                      };
                  })
              });
  
      link.append("title")
          .text(function(d) { return d.label } );         
  
      var node = vis.selectAll("g.node")
          .data(json.nodes)
         .enter()
          .append("svg:g")
          .attr("class","node")
          .call(force.drag);
  
      node.append("svg:circle")
          .attr("r", function(d) {
              if (d.size &gt; 0) {
                  return 10+(d.size*2);
              } else {
                  return 10;
              }
          })
          .attr("id", function(d) { return "Node;"+d.id; } )
          .style("fill", function(d) {
              if(d.style == 'filled') {
                 return d.color;
              };
          })
          .style("stroke", function(d) {
              if(d.style !== 'filled') {
                  return d.color;
              };
          })
          .style("stroke-width", "2")
          .on("mouseover", function() {
              d3.select(this).style("fill", "#999");
              fade(.1);
          })
          .on("mouseout", function(d) {
              if (d.style == 'filled') {
                  d3.select(this).style("fill",d.color);fade(1);
              } else {
                  d3.select(this).style("stroke",d.color);
                  d3.select(this).style("fill","black");
              }
              fade(1);
          });
  
      node.append("title")
          .text(function(d) { return d.Location; } );         
  
      force.nodes(json.nodes)
          .links(json.links)
          .on("tick", tick)
          .alpha(1)
          .start();
  
      function tick() {
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
      });
  
      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; });
      }
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am able to create a new graph when a new json string is received by recalling the whole function again. This creates a new graph in place of the old. I am unable to update the old graph with the new set of values as the values are received; the nodes in my graph do not change, just the relation among them changes.</p>
  
  <p>I did stumble upon an example (<a href="http://bl.ocks.org/1095795" rel="noreferrer">http://bl.ocks.org/1095795</a>) where a new node is deleted and recreated, but the implementation is a bit different. </p>
  
  <p>Any pointers or help will be really appreciated.  </p>