D3.js - ネストされたオブジェクトのアニメーション終了

Question

各データ項目に対して、円で囲まれたグループ（g class = "parent"）を追加します。それらを追加してプロパティを設定するとうまく動作します。

しかし、削除の処理方法を理解できません。終了時にネストされたオブジェクトをアニメーション化する方法は何ですか？

// parents 
var parents = svg.selectAll("parent").data(glyphs); 
parents.enter() 
    .append("g") 
    .attr("class", "parent") 
    .attr("transform", function (glyph) { 
     return "translate(" + glyph.x + "," + glyph.y + ")"; 
    }); 

// children 
var circles = parents.append("circle"); 
circles 
    .attr("r", 0) 
    .attr("fill", function (glyph) { return glyph.color; }); 
// animated entry 
circles.transition() 
    .attr("r", function (glyph) { return glyph.radius; }); 

ここでは機能しない部分があります。終了時に子供をアニメーション化する方法がわかりません。

// animate exit 
circles 
    .exit() // <-- not valid 
    .transition() 
    .duration(250) 
    .attr("r", 0); 
parents 
    .exit() 
    .transition() 
    .delay(250) 
    .remove(); 

良いヒントを教えていただけますか？

Answer 1

データは、このようにあなたは両親との関係で、円のための入力/移行/終了を追加する必要があり、両親にバインドされています

function draw(glyphs){ 
    console.log(glyphs) 
    // parents 
    var parents = svg.selectAll(".parent").data(glyphs); 
    parents.enter() 
    .append("g") 
    .attr("class", "parent") 
    .attr("transform", function (glyph) { 
     return "translate(" + glyph.x + "," + glyph.y + ")"; 
    }) 
    // Parent's data enter -> add circle -> do entry animation 
    .append("circle") 
     .attr("r", 0) 
     .attr("fill", function (glyph) { return glyph.color; }) 
     .transition() 
     .duration(250) 
     .attr("r", function (glyph) { return glyph.radius; }); 

    // parents data changes -> select circles -> transition nested circles 
    parents.select("circle") 
    .transition() 
    .duration(250) 
    .attr("r", function (glyph) { return glyph.radius; }); 

    // Parent's data exit -> select circle -> do exit animation  
    parents.exit() 
    .select("circle") 
     .transition() 
     .duration(250) 
     .attr("r", 0); 

    // Delay removal of parent for 250. 
    parents.exit() 
    .transition() 
    .duration(250) 
    .remove();  
} 

draw(glyphs); 

setTimeout(function(){ 
    draw(glyphs.map(function(g){g.radius = g.radius + 20; return g;})); 
}, 1000); 

setTimeout(function(){ 
    glyphs.pop(); 
    glyphs.pop(); 
    glyphs.pop(); 
    glyphs.pop(); 
    glyphs.pop(); 
    draw(glyphs); 
}, 3000); 

はここに例を示しますhttp://jsfiddle.net/3M4xh/2/