D3.js - Animierter Exit für verschachteltes Objekt

Question

Für jedes Datenelement füge ich eine Gruppe (g class = "parent") mit einem Kreis hinzu. Hinzufügen und Einstellen ihrer Eigenschaften funktioniert gut.

Aber ich kann nicht herausfinden, wie man mit dem Entfernen umgehen kann. Wie animiere ich ein verschachteltes Objekt beim Beenden?

// 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; }); 

Hier ist der Teil, der nicht funktioniert. Ich bin mir nicht sicher, wie ich die Kinder beim Verlassen animieren soll.

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

Kann mir jemand Tipps geben oder auf ein gutes Beispiel hinweisen?

Answer 1

Die Daten werden an die Eltern gebunden, so müssen Sie die Eingabe/Übergang/Ausgang für die Kreise im Verhältnis zu den Eltern hinzufügen:

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); 

Hier ist ein Beispiel: http://jsfiddle.net/3M4xh/2/