有没有办法将过渡应用于 D3 中格式化为货币的数字

Is there a way to apply transitions to numbers formated as currency in D3?

本文关键字：格式化 货币 数字 D3 应用于 有没有      更新时间：2023-09-26

我想在 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)));
                };
              });
相关文章：