Zmiana liczby wyświetlanych jako tekst svg stopniowo, z przejściem D3

Question

Poszukuję prostego sposobu na stopniową zmianę wartości liczby wyświetlanej jako tekst svg za pomocą 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; 
     }); 

Ponieważ tekst w tym przypadku jest numerem, mam nadzieję, że istnieje prosty sposób na zwiększenie go do końca przejścia.

Może ktoś z was ma pomysł.

Cheers

Answer 1

Wydaje już d3JS zapewnia odpowiednią funkcję o nazwie „animacja”

Oto ważną częścią przykład kodu.

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

Można zwiększyć ich w danym przedziale czasowym od początku do każdej dowolnej wartości końcowej niezależnie od ich precyzji liczb.

Został zaimplementowany do tekstu SVG, ale oczywiście działa tak samo dla standardowego tekstu HTML.

Jeśli potrzebna jest tylko funkcja zwykłej animacji dla liczb zaokrąglonych, uzyskuje się nieco większą wagę.