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

使用transition.tween补间 value属性而不是 value属性。

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 回答