2

月または年の値を示す積み上げ棒グラフがあります。

一連の列 (1 または 12) と、各列内の四角形 (9 つの個別の値) で構成されます。

ここで確認できます: (注 - これは現在 AWS で実行されている有効な Web ページです。)

http://54.245.225.47/stackedbar_ex_good

月から年ビューに移動すると、すべての位置を年値に移動し、年値としてフェードアウトしたいと考えています.enter()。

問題は、四角形（通常.exit().transition().attr("y", new_val)、列が削除されるため、呼び出されることはありません（.exit()））です。そして、から子を参照しようと.rectsするsvg.selectAll(".col").exit().transition()と、それらは一度に消えたようです。これは間違っていると思います仕方。

すみません、これはとても紛らわしいです！この種のことは他の場所で回答されていると確信していますが、それを適切に説明する言語さえ知りません（したがって、検索します）。ヒント/ポインタをいただければ幸いです。

（コードがたくさんあります - 投稿するために単純化する方法がわかりません。）

4

1 に答える 1

5

ええ、問題を理解するのはちょっと難しいです...私が理解しているように、SVGから削除される前に、既存の四角形をある位置にアニメーション化する必要があります。しかし、問題はcol、コード内の rect の親がすぐに削除されるため、ネストされた rect がアニメーション化される機会がないことです。右？

もしそうなら、それを回避する1つの方法は、アニメーションを再生する時間をcol与えるために、既存の の削除を遅らせることです。rectsしたがって、次のことを行うのではなく:

col.exit().remove()

次のように遅延を適用します。

col.exit().transition().delay(2000).remove()

ここには実際の目に見える遷移はありません。への呼び出しを遅らせる方法にすぎませんremove()。

于 2013-02-15T17:30:29.137 に答える