D3サンキーダイアグラム：新しいノードとトランジション付きリンクの追加

Question

D3を使用してサニキー図を作成しています。私は追加のノードとリンクを使ってダイアグラムを再描画しようとしており、前のダイアグラムを新しいダイアグラムにアニメートするためにトランジションを使用しています。私は新しいノードとリンクを追加することができましたが、古いノードとリンクは位置を変更しませんでした。新しいノードとリンクはダイアグラム内の任意の場所に追加できるので、SVG全体をクリアして再描画するのではなく、古いダイアグラムから新しいダイアグラムに移行するためにトランジションを使用します。サンキーダイアグラムを描画するコードは、このです：

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 < width/2; 
     }) 
     .attr("x", 6 + sankey.nodeWidth()) 
     .attr("text-anchor", "start"); 

    node.transition().duration(750); 

} 

JSFiddle

それは新しいノードとリンクを追加し、 古いノードとリンクを再配置するトランジションを使用することは可能ですか？

ありがとうございます！

Answer 1

ノードとリンクを新しい位置に移動することでこれを実行できました。そのためのコードは次のとおりです。

JSFiddle

更新

var nodes = d3.selectAll(".node") 
       .transition().duration(750) 
       .attr('opacity', 1.0) 
       .attr("transform", function (d) { 
        if(d.node == 3){ 
         console.log(d.x, d.y); 
        } 
        return "translate(" + d.x + "," + d.y + ")"; 
       }); 

var nodeRects = d3.selectAll(".node rect") 
    .attr("height", function (d) { 
     if(d.node == 3){ 
      console.log(d.dy); 
     } 
     return d.dy; 
    }) 


var links = d3.selectAll(".link") 
       .transition().duration(750) 
       .attr('d', path) 
       .attr('opacity', 1.0)