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

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

1 个答案: