D3.js v4.0.0-alpha.35トランジションが動作しない

Question

私はこの最新バージョンのd3.jsを使用してcollapsible treeを模倣しようとしていますが、いくつかの問題があります。

nodeEnterコードの一部が正常に実行されていますが、何らかの理由でnodeUpdateという別名コードの実行部分は実行されません。私はコンソールで視界の問題ではないことを確認しますが、エラーはありません。何もありません。座標はコードのnodeEnter部分によって開始されたときと同じです。 私の唯一の推測では、何かがd3.jsの新しいバージョンで変更されたことであると私は何かが欠けています...

var t = d3.transition() 
 
.duration(750) 
 
.ease(d3.easeLinear); 
 

 
var tree = d3.tree() 
 
    .size([height, width]); 
 

 
function updateDisplay(source){ 
 
    
 
    var treeData = tree(root).descendants(), 
 
     linkData = treeData.slice(1); 
 
    
 
    treeData.forEach(function(d) { 
 
    
 
    /*Normalize for fixed-depth between levels, so that y value 
 
    ** stays the same through transition as opposed to being 
 
    ** an even division of the svg width. */ 
 
    d.y = d.depth *180; 
 
    
 
    }); 
 
    
 
          
 
    var node = svg.selectAll("g.node") 
 
       .data(treeData); 
 

 
    var nodeEnter = node.enter() 
 
         .append("g") 
 
         .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");}) 
 
         .attr("transform", function(d) {return "translate(" + source.y0 + "," + source.x0 + ")";}); 
 
    
 
    console.log(nodeEnter); 
 
    
 
    nodeEnter.append("rect") 
 
      .attr("x", 3) 
 
      .attr("y", -10) 
 
      .attr("rx", 1e-6)//goes to 8 after transition 
 
      .attr("ry", 1e-6)//goes to 8 after transition 
 
      .attr("width", 1e-6) 
 
      .attr("height", 1e-6) 
 
      .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";}) 
 
      .attr("style", "fill:#EEEEEE;filter:url(#dropshadow)"); 
 

 
    nodeEnter.append("text") 
 
      .attr("dy", 3) 
 
      .attr("x", function(d) {return d.children ? -8 : 30;}) 
 
      .style("text-anchor", function(d) {return d.children ? "end" : "start";}) 
 
      .text(function(d) {return d.id;}) 
 
      .each(function(d) {d.NameWidth = this.getBBox().width;}) 
 
      .style("fill-opacity", 1e-6); 
 
    
 

 
    var avatar = nodeEnter.append("g").attr("style", "filter:url(#dropshadow)"); 
 

 
    avatar.append("clipPath") 
 
      .attr("id", "avatarClip") 
 
      .append("circle") 
 
      .attr("cx", 1e-6)//12.5 
 
      .attr("cy", 1e-6)//12.5 
 
      .attr("r", 1e-6);//12.5 
 

 
    avatar.append("circle") 
 
      .attr("cx", 1e-6)//12.5 
 
      .attr("cy", 1e-6)//12.5 
 
      .attr("r", 1e-6)//12.5 
 
      .attr("style", "fill:white") 
 
      .attr("transform", "translate(0,-12)"); 
 

 
    avatar.append("image") 
 
      .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");}) 
 
      .attr("clip-path", "url(#avatarClip)") 
 
      .attr("class", function(d) {return (d.children ? "avatar--manager" : "");}) 
 
      .attr("width", 25) 
 
      .attr("height", 25) 
 
      .attr("transform", "translate(0,-12)"); 
 
    
 
    avatar.on("click", function(d) {toggle(d);}); 
 
    
 
    //TRANSITION OF NODES TO NEW POSITIONS 
 
    var nodeUpdate = node.transition(t) 
 
         .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");}) 
 
         .attr("transform", function(d) {return "translate(" + d.y + "," + d.x + ")";}); 
 
    
 
    nodeUpdate.select("text") 
 
    .attr("x", function(d) {return d.children ? -8 : 30;}) 
 
    .style("text-anchor", function(d) {return d.children ? "end" : "start";}) 
 
    .text(function(d) {return d.id;}) 
 
    .style("fill-opacity", 1); 
 

 
    nodeUpdate.select("rect") 
 
       .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";}) 
 
       .attr("height", 20) 
 
       .attr("width", function(d) {return (d.NameWidth + 35);}); 
 
    
 
    nodeUpdate.select("clipPath") 
 
       .attr("cx", 12.5) 
 
       .attr("cy", 12.5) 
 
       .attr("r", 12.5); 
 
    
 
    nodeUpdate.select("circle") 
 
      .attr("cx", 12.5) 
 
      .attr("cy", 12.5) 
 
      .attr("r", 12.5); 
 

 
    nodeUpdate.select("image") 
 
    .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");}) 
 
    .attr("clip-path", "url(#avatarClip)") 
 
    .attr("class", function(d) {return (d.children ? "avatar--manager" : "");}); 
 
    
 
    //TRANSITIONING EXITING NODES 
 
    var nodeExit = node.exit() 
 
        .transition(t) 
 
        .attr("transform", function(d) {return "translate(" + source.y + "," + source.x + ")";}) 
 
        .remove(); 
 
    
 
    
 
    
 
    /*var link = svg.selectAll(".link") 
 
       .data(linkData);*/ 
 
    
 

 
    // Stash the old positions for transition. 
 
    root.each(function(d) { 
 
    d.x0 = d.x; 
 
    d.y0 = d.y; 
 
    }); 
 
    
 
}

PS：私のコードは、リンクの正確なレプリカではありません上に、私は自分のスピンをデザインに来たときに入れました...

Answer 1

入力と更新の選択肢がv3からv4に変更されました。 v3では、入力選択が自動的に更新選択にマージされましたが、同じ結果を得るために明示的にselection.merge()をv4から上に呼び出さなければなりません。

V3のselection.enter()のドキュメントが教えてくれる：

選択を入力して、あなたが追加したり、挿入したときに、更新選択に合流します。

入力選択は、典型的には、要素のみを追加する一時的に使用され、そして付加した後、更新の選択としばしばmergedある：

V4の同じ方法のドキュメントが、一方、読み出し入力要素と更新要素の両方に変更を適用することができます。

は無い驚きと来るべきV3を使用して、この簡単な例を見てください：

V4と同じことを

var update = d3.select("svg").selectAll("circle") 
 
    .data([1]); 
 
    
 
var enter = update.enter() 
 
    .append("circle") 
 
    .attr("cx", "50") 
 
    .attr("cy", "50") 
 
    .attr("r", "20") 
 
    .attr("fill", "red"); 
 
    
 
update 
 
    .transition().duration(2000) 
 
    .attr("fill", "blue"); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg></svg>

は、しかし、少し修正が必要です。

var update = d3.select("svg").selectAll("circle") 
 
    .data([1]); 
 
    
 
var enter = update.enter() 
 
    .append("circle") 
 
    .attr("cx", "50") 
 
    .attr("cy", "50") 
 
    .attr("r", "20") 
 
    .attr("fill", "red"); 
 
    
 
update 
 
    .merge(enter) // This merges both the enter and the update selection 
 
    .transition().duration(2000) 
 
    .attr("fill", "blue");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg></svg>

.merge()のコメント行は、以前に入力選択を使用して新しい要素を入力したにもかかわらず、更新の選択が空になるため、説明した効果を示しています。