对于每一个选择的元素插入帧,第一个参数是要改变的’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");
});