1

トランジションに関するd3ドキュメントでは、サブトランジションバージョンが現在のトランジションからイージング、期間、および遅延を継承すると言っているのtransition.select(selector)とほぼ同じです。selection.select(selector).transition()

両方のアプローチを使用した私の観察では、サブトランジションは実際には、ドキュメントが示すよりも親トランジションとわずかに深い関係を持っている必要があります。私が見たのは、互いに非常に密接に関連している2つのトランジションがある場合、両方のトランジションを完全に一緒に実行するには、サブトランジションを使用する必要があるということです。

これは、要点を説明するために考案された例です（ただし、これは十分に単純なので、実際には問題が表示されない可能性があります）。私のDOMにこれがあるとしましょう：

    <g>
        <circle></circle>
    </g>

トランジション1が実行され<g>、「transform = translate（100,0）」を適用して水平方向に移動します。

トランジション2は実行され<circle>、「transform = translate（-100、0）」を適用してこれを逆にし、反対方向に水平方向に戻します。

期待される結果は、円がまったく動かないことです。しかし、実際に何が表示されるかは、トランジションがどのように設定されているかによって異なります。継続時間などに同じプロパティで構成された2つの別々の遷移を使用すると、円がわずかにジッターしているように見えます。おそらくこれは、遷移補間器に渡される中間値がわずかに同期していないためです。

ただし、サブトランジションを使用して2つのトランジションを設定すると、完璧に見えます。

私の質問は、トランジションとサブトランジションの関係についてです。個別のトランジションを使用する場合とサブトランジションを使用する場合のタイミングと補間の違いは何ですか？

4

1 に答える 1

2

サブトランジションは以下を継承します。

  • 遷移ID（親遷移と同時に続行できるようにする）
  • 参照時間（親トランジションと同期）
  • イージング機能
  • ノードごとの計算された遅延
  • ノードごとに計算された期間

参考のためにtransition-select.jsとtransition-selectAll.jsを見てください。あなたの場合、g要素とcircle要素の遷移を同期するために必要なのは参照時間です。

これはパブリックプロパティ（ ）であるため、 transition.transitionまたはtransition.selecttransition.timeを使用して作成せずに、2つのトランジションを同期する場合は、明示的に設定できます。しかし、ここでサブトランジションを使用しない理由はわかりません。

編集：D3 3.0以降、transition.each（callback）を使用して、遷移パラメーターを継承する遷移を作成できます。これはtransition.selectおよびtransition.selectAllに似ていますが、トランジションを作成するための要素の選択方法に柔軟性がある点が異なります。

于 2012-08-03T23:19:37.993 に答える