3

私はattrTweenを理解しようとしています。この正方形を動かす簡単な方法はattrを使用することですが、この例の目的はattrTweenを理解することです。次の例では何も実行されませんが、コンソールにもjsエラーが表示されないため、どこが間違っているのかわかりません。

var svg = d3.select("svg")
var pi = Math.PI;

var mySquare=svg.append("rect")
  .attr("x",60)
  .attr("y",60)
  .attr("width",200)
  .attr("height",200);

mySquare.transition()
  .duration(2000)
  .attrTween("x", d3.interpolate(60,400))

そして、ここに例のライブコーディングリンクがあります：http：//livecoding.io/5037197

4

1 に答える 1

13

APIから：「トゥイーンの戻り値[強調が追加された]は補間器でなければなりません：関数...」

これは、インライン関数を使用した1つの方法です。

http://jsfiddle.net/TsMgJ/2/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", function (d, i, a) { 
       console.log(a); // returns 60, the value of "x" at the start
       return d3.interpolate(a, 400); 
  });

そして、これは別の方法であり、連鎖の外側の関数を使用します。

http://jsfiddle.net/tz5KT/1/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", myTweenFunction ); 

function myTweenFunction(d, i, a) {
  console.log( a ); // returns 60, the current value (value at start)
  return d3.interpolate(a, 400);
}
于 2013-02-26T13:25:21.017 に答える