13

D3 の抽象化は今でも頭を悩ませるので、これを正しく提示できれば幸いです。

D3バージョン 3では、要素 (円など) が与えられ、要素ごとに実行される可能性のある遷移が 1 つだけ与えられた場合、その要素で現在実行中の遷移が何であるかを判断する最良の方法は何ですか?

要素を手動で検査できることは承知して__transition__いますが（ヘルプも歓迎します）、もう少し高いレベルの何かを本当に望んでいます。

ここでの私のより大きな目標は、sub への遷移がある場合のみ、subtransition を作成することです。それ以外の場合は、新しいトランジションを作成します。

4

2 に答える 2

3

簡単に言えば、トランジションを取得するための標準的な方法はなく、そうすることを意図していないということです。のように、それはサポートされていません。

少し長い答えは、目的のために、おそらく を使用してハッキングできるということ__transition__です。アイデアは、存在するかどうかを確認__transition__し、存在する場合は、存在しないまで待ってから、新しい (サブ) トランジションを開始することです。

そのためには、適切な関数を使用して選択プロトタイプを拡張すると役立ちます。

d3.selection.prototype.getTransition = function() {
  if(this[0][0].__transition__) {
    return this[0][0].__transition__[1];
  } else return undefined;
}

これは非常にハックであり、選択範囲内にちょうど 1 つの遷移を持つ要素が 1 つだけある場合にのみ機能することに注意してください。しかし、あなたはアイデアを得る必要があります。

これで、この関数を使用して、遷移が実行されているかどうかを判断できます。

if(sel.getTransition() !== undefined) {
  // transition is there
} else {
  // no transition
}

残念ながら、__transition__では遷移オブジェクトを再構築することはできません。つまり、以下は機能しません。

sel.getTransition().transition()...

したがって、現在実行中のサブトランジションが完了した後に開始するサブトランジションをシミュレートするには、 を使用setTimeoutして何かが実行されているかどうかを確認し、何も実行されていないとすぐに新しいトランジションを開始します。

function check() {
  if(sel.getTransition() !== undefined) {
    setTimeout(check, 100);
  } else {
    sel.transition().duration(1000)...;
  }
}
check();

チェックの間隔 (ここでは 100 ミリ秒) を短くして、前のトランジションの直後のトランジションの印象を良くすることができます。

ここに完全な例があります。ほとんどの場合、トランジション オブジェクトへの参照をどこかに保持し、それを使用する方がはるかに簡単で優れていることに注意してください。この例は、ハックな概念実証としてのみ機能します。

于 2014-03-01T00:09:46.357 に答える