Question Modification progressive du nombre affiché en texte svg, avec transition D3


Je cherche un moyen simple de changer progressivement la valeur d'un nombre affiché sous forme de texte svg 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;
        });

Comme le texte dans ce cas est un nombre, j'espère qu'il existe un moyen simple de l'incrémenter jusqu'à la fin de la transition.

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

À votre santé


15
2017-11-19 13:39


origine


Réponses:


Il semble que d3JS offre déjà une fonction appropriée appelée "tween"

Voici 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 les incrémenter sur un intervalle de temps donné depuis n'importe quel début jusqu'à n'importe quelle valeur finale, quelle que soit leur précision.

Son implémenté pour le texte SVG, mais bien sûr, fonctionne de la même manière pour le texte HTML standard.

Si vous n'avez besoin que de la fonction d'interpolation simple pour les nombres arrondis, le poids est un peu plus léger.

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

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

48
2017-11-19 18:07