D3 Sankey Diagram: Adding New Node and Link with Transition
<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>