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”

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

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