0

我想在 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;
        };
    });
4

2 回答 2

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

逗号的正则表达式取自这里

于 2013-11-15T04:48:10.107 回答
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)));
                };
              });
于 2015-10-13T07:06:16.483 回答