使用 D3 过渡逐渐更改显示为 svg 文本的数字

我正在寻找一种简单的方法来逐渐更改使用 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;
        });

由于本例中的文本是一个数字，我希望有一种简单的方法可以将其增加到转换的末尾。

也许你们中有人有想法。

Cheers

看来 d3JS 已经提供了一个合适的函数，称为“tween”

这是代码示例的重要部分。

 .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/ 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));
        };
    });​