D3.js - Lối thoát hoạt hình cho đối tượng lồng nhau

Question

Đối với mỗi mục dữ liệu, tôi thêm một nhóm (g class = "parent") với một vòng tròn trong đó. Thêm chúng và thiết lập các thuộc tính của chúng hoạt động tốt.

Nhưng tôi không thể tìm ra cách xử lý việc xóa. Cách để animate một đối tượng lồng nhau khi thoát là gì?

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

Đây là phần không hoạt động. Tôi không chắc chắn làm thế nào để animate các trẻ em trên lối ra.

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

Có ai có thể đưa ra một số mẹo hoặc chỉ cho tôi một ví dụ hay không?

Answer 1

Dữ liệu được ràng buộc với cha mẹ, do đó bạn cần phải thêm vào/chuyển/xuất cảnh cho các vòng tròn trong mối quan hệ với cha mẹ:

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

Dưới đây là một ví dụ: http://jsfiddle.net/3M4xh/2/