各データ項目に対して、円で囲まれたグループ(g class = "parent")を追加します。それらを追加してプロパティを設定するとうまく動作します。D3.js - ネストされたオブジェクトのアニメーション終了
しかし、削除の処理方法を理解できません。終了時にネストされたオブジェクトをアニメーション化する方法は何ですか?
// 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();
良いヒントを教えていただけますか?
の代わりに、円.exit()では、parents.exit()の遷移を試してみてください。 –
あなたはすでにそれをやっているのを見ています。あなたはparents.selectAll( 'g')を試すことができます。transition()。duration()... remove()しかし、親を削除する前に行います。 –