我正在寻找一种简单的方法来逐渐更改用d3显示为svg文本的数字的值。
var quality = [0.06, 14];
// qSVG is just the main svg element
qSVG.selectAll(".txt")
.data(quality)
.enter()
.append("text")
.attr("class", "txt")
.text(0)
.transition()
.duration(1750)
.text(function(d){
return d;
});
由于在这种情况下,文本是数字,所以我希望有一种简单的方法可以将其递增到过渡结束。
也许你们中的某人有一个主意。
干杯
最佳答案
看来d3JS已经提供了一个合适的功能,称为“补间”
这是代码示例的重要部分。
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d),
prec = (d + "").split("."),
round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
return function(t) {
this.textContent = Math.round(i(t) * round) / round;
};
});
http://jsfiddle.net/c5YVX/280/
您可以在给定的时间间隔内将它们从任何开始值增加到任何结束值,无论它们的数字精度如何。
它是针对SVG文本实现的,但是对于标准html文本当然也可以使用相同的功能。
如果您只需要简单的补间函数来取整数字,则它的重量更轻一些。
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d),
return function(t) {
this.textContent = Math.round(i(t));
};
});
关于d3.js - 通过D3过渡逐渐更改显示为svg文本的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13454993/