更改数字逐渐显示为svg文本,D3转换

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));
        };
    });?