Modifica numero visualizzato come testo svg gradualmente, con transizione D3

Question

Sto cercando un modo semplice per modificare gradualmente il valore di un numero visualizzato come testo svg con 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; 
     }); 

Dal testo in questo caso è un numero spero che ci sia un modo semplice per incrementare solo fino alla fine della transizione.

Forse qualcuno di voi ha un'idea.

Acclamazioni

Answer 1

Sembra già d3JS fornisce una opportuna funzione denominata "interpolazione"

Ecco la parte importante dell'esempio di codice.

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

Si possono incrementare in un determinato intervallo di tempo da qualsiasi inizio di ogni valore finale indipendentemente il loro numero di precisione.

È implementato per il testo SVG ma, naturalmente, funziona allo stesso modo per il testo html standard.

Se è necessaria solo la funzione di interpolazione per i numeri arrotondati, diventa leggermente più leggera.

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

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