2013-04-06 19 views
5

D3トランジションのために 'pause'と 'resume'を理解しようとしています。これはguideです。私は「一時停止」がどのように機能しているのか理解していますが、「再開」に関してはほとんど失われません。私は著者の説明、具体的には「線形」またはの最初の再開の説明を理解できませんでした。私の質問は、e.attr("T",0);.attr("T",1);が正確に何をしているのですか?D3トランジション - 一時停止と再開

私はここで、ビデオや波形例えば再生ヘッドに再開機能を適用しています:jsfiddle

答えて

4

コードe.attr("T",0).attr("T",1)セットが選択されたノードの属性。すなわち、新しい属性「T」が作成され、設定される。この目的は、純粋に停止と再開を容易にすることです.0は開始前の遷移を表し、最後は1を表します。

この属性がトランジションに含まれている場合、値は0から1に徐々に変化します。チュートリアルの作成者が指摘するように、これは任意の時点でトランジションの状態を取得するために使用できます。あなたは単に "T"の値を照会する必要があります。特定のトランジションも保存すると、その値を使用して、いつでも一時停止して再開することができます。

「T」には特別なものはありません。任意の(未使用の)属性名を使用できます。目的は、移行がどのくらい進んでいるかを示す何らかの方法を持つことだけです。

0

私はこの正確な問題にも苦労しています。私は、私を捨ててしまった例に誤植があると思います。どこ著者は書いている:

var e = d3.select("#time"); 
e.attr("T",0); 

c.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

eは意味がありませんc遷移、としてそのT属性を更新するかのように思え。代わりに、私は次のようにそれがあるべきだと思う:

var e = d3.select("#time"); 
e.attr("T",0); 

e.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

今、私たちは#time要素を選択し、0にそのT属性の初期値を設定し、その後の経過1Tを変更し、同じ要素へのトランジションを追加します指定された期間。

関連する問題