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/