Changer le numéro affiché en texte svg progressivement, avec transition D3

Je suis à la recherche d'un moyen simple de changer progressivement la valeur d'un numéro affiché comme svg texte avec 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;
        });

Puisque le texte dans ce cas est un nombre, je l'espère, il est un moyen facile de simplement incrémenter à la fin de la transition.

Peut-être que quelqu'un de vous a une idée.

Acclamations

source d'informationauteur zbug | 2012-11-19

  1. 48

    Il semble d3JS déjà offre une fonction appelée "interpolation"

    Ici est la partie importante de l'exemple de code. 

     .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/

    Vous pouvez incrémenter sur un intervalle de temps donné du tout début à la toute fin de la valeur quel que soit leur numéro de précision.

    Sa mise en œuvre pour le SVG texte, mais bien sûr, fonctionne de la même pour la norme de texte html.

    Si vous avez seulement besoin de la plaine d'interpolation de la fonction de chiffres arrondis, il devient un peu plus leightweight.

     .tween("text", function(d) {
        var i = d3.interpolate(this.textContent, d),

        return function(t) {
            this.textContent = Math.round(i(t));
        };
    });​