transition.tween

对于每一个选择的元素插入帧，第一个参数是要改变的’attr’,’style’,’text’，第二个参数是一个函数。
对于每一个选择的元素会传入当前的datum ‘d’,索引 index 'i',当前的元素对象this，以及ease方法的时间t(范围是[0,1])

更改填充属性

transition.tween("attr.fill", function() {
  var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue");
  return function(t) {
    node.setAttribute("fill", i(t));
  };
});

更改值

transition.tween("text", function() {
    var i = d3.interpolateRound(100, 200);
    return function(t) {
        this.textContent = i(t);
    };
});

还有一些快捷的方法

transition.attrTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});

transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});

transition.styleTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});

transition.styleTween("fill", function() {
  return d3.interpolateRgb(this.style.fill, "blue");
});