Question

我正在尝试在d3.js中将一些文本从一个数字增加到另一个数字。 This example正是我正在寻找的，但我需要传递一个带有美元符号和逗号的数字，而不只是一个数字。如果我尝试传入我已格式化的值，则返回NaN。有什么建议吗？

示例：

function numberWithCommas(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }
var foo = numberWithCommas(2000); //foo now = 2,000

d3.select('body')
  .text(0)
  .transition()
  .duration(duration)
  .ease('linear')
  .tween("text", function() {
    var i = d3.interpolate(this.textContent, foo);
    return function(t) {
    this.textContent = Math.round(i(t));
  };
});

编辑：我的解决方案：

d3.select("#totaltext")
            .transition()
            .duration(500)
            .ease('linear')
            .tween("text", function() {
                var i = d3.interpolate(this.textContent, sum);
                return function(t) {
                  this.textContent = '$' + d3.format(",")(Math.round(i(t)));
                };
              })

Answer 1

您需要删除$和逗号符号，如下所示......

var number = Number(x.replace(/[^0-9\.]+/g,""));

如果您要插入您需要的货币create a custom interpolator

d3.interpolators.push(function(a, b) {
  var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f");
  if ((ma = re.exec(a)) && (mb = re.exec(b))) {
    a = parseFloat(ma[1]);
    b = parseFloat(mb[1]) - a;
    return function(t) {
      return "$" + f(a + b * t);
    };
  }
});

用逗号增加svg文本

1 个答案: