円グラフがあり、ラベルの回転を切り替えようとしています。何らかの理由で、追加するtransition
とテキストが削除されます。私は自分の問題のフィドルを作成しました:
http://jsfiddle.net/samselikoff/k69We/
チャートはレンダリングされますが、ラベルはありません。110 行目で、setTimeout
関数のコメントを外します。1 秒後に、トランジションが正しく機能します。
setTimeout のない遷移がラベル値を吹き飛ばすのはなぜですか?
円グラフがあり、ラベルの回転を切り替えようとしています。何らかの理由で、追加するtransition
とテキストが削除されます。私は自分の問題のフィドルを作成しました:
http://jsfiddle.net/samselikoff/k69We/
チャートはレンダリングされますが、ラベルはありません。110 行目で、setTimeout
関数のコメントを外します。1 秒後に、トランジションが正しく機能します。
setTimeout のない遷移がラベル値を吹き飛ばすのはなぜですか?
コード内のエラーのある行のペアは、65 行目です。
piece.append("g").attr("class", "label").append("text").style("opacity", 0);
そして93行目:
g.selectAll(".label")
.data(function(d) {return d;})
.transition()
.duration(500)
// ...
.select('text')
// ...
.style("opacity", 1)
新しいトランジションを開始することにより、114 行目でこのトランジションをキャンセルしtext
ます。
g.selectAll(".label")
.select("text")
.transition()
.duration(500)
// ... (opacity is not changed here)
したがって、 のはゼロopacity
のままです。text
DOM を調べて、実際にtext
要素が存在すること (つまり、吹き飛ばされていないこと) を確認できますが、不透明度はゼロです。これは、D3v2.7 と D3v3 の間の動作上の変更です。
元々望んでいた動作に応じて、これを修正する方法がいくつかあります。方法の 1 つがこれです: http://jsfiddle.net/zvPB6/これは、他のトランジションと同期してラベルをまっすぐにします。
に が必要な場合は、すべての で遷移全体が遅延しないように、おそらくイベントをリッスンして.delay(500)
新しい遷移を開始する必要があります。straightening
end
text