title: D3 Sankey Diagram: Adding New Node and Link with Transition
body: <p>I am creating a sankey diagram using D3. I am trying to redraw the diagram with additional node and link and using transition to animate the previous diagram to the new diagram. I was able to add in new node and link but the old nodes and links did not change position. Since the new node and link could be added at any place within the diagram, I do not want to clear and redraw the entire svg, but use transition to get from the old diagram to the new one. The code to draw the sankey diagram is this:</p>
  
  <pre><code>function draw(data){
      // Set the sankey diagram properties
      var sankey = d3sankey()
          .nodeWidth(17)
          .nodePadding(27)
          .size([width, height]);
  
      var path = sankey.link();
      var graph = data;
  
      sankey.nodes(graph.nodes)
          .links(graph.links)
          .layout(32);
  
      sankey.relayout();
  
      // add in the links
      link.selectAll(".link")
          .data(graph.links)
          .enter().append("path")
          .attr("class", "link")
          .attr("d", path)
          .style("fill", "none")
          .style("stroke", function(d){
              return "grey";
          })
          .style("stroke-opacity", "0.4")
          .on("mouseover", function() { d3.select(this).style("stroke-opacity", "0.7") } )
          .on("mouseout", function() { d3.select(this).style("stroke-opacity", "0.4") } )
          .style("stroke-width", function (d) {
              return Math.max(1, d.dy);
          })
          .sort(function (a, b) {
              return b.dy - a.dy;
          });
  
      link.transition().duration(750);
      //link.exit();
  
      // add in the nodes
      var node = nodes.selectAll(".node")
          .data(graph.nodes)
          .enter().append("g")
          .attr("class", "node")
          .attr("transform", function (d) {
              return "translate(" + d.x + "," + d.y + ")";
          });
  
      // add the rectangles for the nodes
      node.append("rect")
          .attr("height", function (d) {
              return d.dy;
          })
          .attr("width", sankey.nodeWidth())
          .style("fill", function (d) {
              return d.color = color(d.name.replace(/ .*/, ""));
          })
          .style("fill-opacity", ".9")
          .style("shape-rendering", "crispEdges")
          .style("stroke", function (d) {
              return d3.rgb(d.color).darker(2);
          })
          .append("title")
          .text(function (d) {
              return d.name + "\n" + format(d.value);
          });
  
      // add in the title for the nodes
      node.append("text")
          .attr("x", -6)
          .attr("y", function (d) {
              return d.dy / 2;
          })
          .attr("dy", ".35em")
          .attr("text-anchor", "end")
          .attr("text-shadow", "0 1px 0 #fff")
          .attr("transform", null)
          .text(function (d) {
              return d.name;
          })
          .filter(function (d) {
              return d.x &lt; width / 2;
          })
          .attr("x", 6 + sankey.nodeWidth())
          .attr("text-anchor", "start");
  
      node.transition().duration(750);
  
  }
  </code></pre>
  
  <p>The <a href="https://jsfiddle.net/jpga0knv/1/" rel="nofollow">JSFiddle</a></p>
  
  <p>Is it possible to use transition to add in new node and link and reposition 
  old nodes and links?</p>
  
  <p>Thanks!</p>