d3.js - 通过D3过渡逐渐更改显示为svg文本的数字

Question

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

由于在这种情况下，文本是数字，所以我希望有一种简单的方法可以将其递增到过渡结束。

也许你们中的某人有一个主意。

干杯

Answer 1

看来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));
        };
    });​