1

D3 トランジションを使用してテキストを回転させていますが、奇妙な問題が発生しています。0 度から -90 度まで回転すると、トランジションは期待どおりに機能します。ただし、-90 度から 0 度に移行する場合、移行は機能しません。ここで例を見ることができます - http://jsfiddle.net/t7MRa/。0 度に遷移するコードは次のとおりです。

d3.selectAll("h2")
   .transition().duration(1000)
   .style("-webkit-transform", "rotate(0deg)");

.style("-webkit-transform", "none")うまくいかなかったものを試しました。私が間違っていることに関するヒントはありますか？ありがとう！

4

1 に答える 1

3

D3 はgetComputedStyle、遷移の開始値を決定するために使用します。残念ながら、getComputedStyleCSS 変換では、指定した変換文字列ではなく、変換マトリックスが返されます。したがって、逆遷移の開始点は次のようになります。

matrix(0, -1, 1, 0, 0, 0)

（最初の遷移が機能する理由は実際にはわかりません。要素に変換がない場合の変換行列の値は「行列（1、0、0、1、0、0）」であり、どういうわけか文字列補間器はそれを使って何かをしますが、理由はわかりません。)

これを回避するには、いくつかのオプションがあります。

  1. 開始点と終了点が明確に定義されている場合 (例のように) 、「回転」文字列として回転の現在の状態に基づいて、既知の開始および終了変換を渡してinterpolateStringを実行するカスタム トゥイーンを作成できます。

  2. 「回転」文字列を変換行列に変換し、transition.style代わりに渡すことができます。CSS 変換に関する MDN の記事では、rotate(angle)これは[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

  3. text要素で SVG を使用するように切り替えることができます。SVG 変換は d3 によってよく理解されており、ほとんどの場合 (例は 1 つです)、特別な処理をしなくても機能します。

これを変更することについて議論が行われている Firefox に関するバグ レポートを見つけましたが、Firefox と WebKit の両方で同じ動作が見られることを考えると、しばらくの間この動作を続けることになると思われます。

于 2013-09-10T22:09:41.073 に答える