javascript - 为什么这个简单的attrTween示例不起作用？

我试图了解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

最佳答案

在API中:“补间的返回值 [已加重]必须是插值器:函数...”

这是一种带有内联函数的方法。

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);
}