Изменение числа, отображаемого в виде svg-текста постепенно, с переходом D3

Я ищу простой способ постепенного изменения значения числа, отображаемого как текст svg с d3.

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

Так как текст в этом случае является числом, я надеюсь, что есть простой способ просто увеличить его до конца перехода.

Возможно, у кого-то из вас есть идея.

Приветствия

Ответ 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));
        };
    });