我想在 D3 中做一个类似于这样的计数器转换效果:http://jsfiddle.net/c5YVX/8/
使用格式化为货币的值(应用格式)是否可以达到相同的效果?如果是这样,如何?
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;
};
});
return function(t) {
this.textContent = '$' + (Math.round(i(t) * round) / round).toFixed(2).replace(/B(?=(d{3})+(?!d))/g, ",");
};
逗号的正则表达式取自此处。
我可能来不及参加聚会,但这对我来说就像魅力一样。
.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)));
};
});