Thay đổi số được hiển thị dưới dạng văn bản svg dần dần, với chuyển đổi D3

Question

Tôi đang tìm cách đơn giản để thay đổi dần giá trị của một số được hiển thị dưới dạng văn bản svg có 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; 
     }); 

Vì văn bản trong trường hợp này là số tôi hy vọng có một cách dễ dàng để tăng lên đến cuối quá trình chuyển đổi.

Có thể ai đó trong bạn có ý tưởng.

Cheers

Answer 1

Dường d3JS đã cung cấp một chức năng phù hợp gọi là "tween"

Đây là phần quan trọng của mã ví dụ.

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

Bạn có thể tăng chúng trong một khoảng thời gian nhất từ ​​bất kỳ đầu đến bất kỳ giá trị cuối không phân biệt chính xác số lượng của họ.

Được triển khai cho văn bản SVG nhưng tất nhiên hoạt động tương tự cho văn bản html chuẩn.

Nếu bạn chỉ cần chức năng đồng bằng tween cho số tròn, số liệu sẽ tăng thêm một chút.

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

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