2013-11-15 72 views
0

我想做的D3類似下面的櫃檯過渡效果: http://jsfiddle.net/c5YVX/8/有沒有辦法將轉換應用於格式化爲D3中的貨幣?

有沒有可能實現使用(應用格式),格式化爲貨幣值相同的效果?如果是這樣,怎麼樣?

var start_val = 0, 
duration = 5000, 
end_val = [0.06, 14, 1.33333, -232332312.00, 99999]; 

var qSVG = d3.select("body").append("svg").attr("width", 200).attr("height", 200); 

qSVG.selectAll(".txt") 
    .data(end_val) 
    .enter() 
    .append("text") 
    .text(start_val) 
    .attr("class", "txt") 
    .attr("x", 10) 
    .attr("y", function(d, i) { 
     return 50 + i * 30 
    }) 
.transition() 
.duration(3000) 
    .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; 
     }; 
    }); 

回答

1
return function(t) { 
    this.textContent = '$' + (Math.round(i(t) * round)/round).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
}; 

爲逗號正則表達式是從here服用。

+0

沒有。這樣做,我沒有得到成千上萬的逗號分隔符。 – Gilbert

+0

檢查更新後的答案,它應該做你以後的事情。 –

+0

太好了。謝謝。這按預期工作。 – Gilbert

0

我可能爲晚會太晚了, 但這對我來說很有魅力。

.tween('text', function() { 
       //Reformat the textContent to a integer value; 

       var content = this.textContent == '' ? 0 : parseInt(this.textContent.replace('$', '').replace(',', '')); 
       var i = d3.interpolate(content, d.ccCount); 
       return function(t) { 
        this.textContent = '$' + d3.format(",")(Math.round(i(t))); 
       }; 
       });