2

範囲入力フィールドを使用してトランジション アニメーションの進行状況を表示したいのですが、範囲入力の値を継続的に更新するためにリッスンできる属性/スタイルが変更されるたびに発生するイベントを知りません。each("end", ...) と each("start", ...) があることは知っていますが、それらは起動するだけです。トランジションのすべての部分で何かを起動したい (これはd3.js ではtと呼ばれていると思います)。アニメーションの一部として範囲入力の「値」属性を更新してみましたが、うまくいきません（HTMLで値の更新は見えますが、スライダーがスライドしません）

circle
    .attr('cx', xScale(0))
    .attr('value',0)
  .transition()
    .duration(anim_duration)
    .ease(ease)
    .attr('cx', xScale(1))
    .attr('value',100)  <-- Does not work

そして、私の範囲の入力フィールドで：

range
    .attr('value',0)
  .transition()
    .duration(anim_duration)
    .ease('linear')
    .attr('value',100)  <-- Does not work

さらに、範囲入力を使用して、アニメーションを前後に移動したいと考えています。基本的に距離計は、d3.js の「ムービー」を制御するために使用できるムービーの進行状況インジケータのようなものです。

これが私がこれまでに得たものです

ありがとう。

4

1 に答える 1

2

value属性ではなくvalueプロパティをトゥイーンするには、transition.tweenを使用します。

d3.select("input").transition()
    .tween("value", function() {
      var i = d3.interpolate(this.value, this.max);
      return function(t) { this.value = i(t); };
    });

実際の例については、 bl.ocks.org/7367177を参照してください。

于 2013-11-08T06:50:04.090 に答える