Javascript 在d3中格式化插值字符串或数字

我用d3制作文本动画，显示用户完成任务的进度。例如，如果他们完成了32.51%的任务，文本将在2秒钟左右的时间内从0%变为32.51%

为此，我将在svg文本元素上使用d3的attrTween方法与d3.interpolate结合使用。插值效果很好，但是我在格式化文本时遇到了一些问题。我希望文本始终显示4位数字，因此0%=00.00%，4.31%=04.31%等等。如果能够做到这一点，而不必对插值器返回的内容进行后期处理，那就太好了。换句话说，在将其放入DOM之前，不必获取返回的百分比并检查是否有4位数字，并在每一侧添加零填充

作为测试，我尝试通过将a和b值设置为插值器来指定我想要的格式，如so

d3.interpolate（“00.00”，“30.00”）

，但最终文本是“30”，后面的零被截断

---

有什么建议吗？

您可以向d3添加自定义插值器。插值器-请参阅。文档中给出的示例与您的示例非常接近-唯一真正的变化是指定输出格式，在您的情况下应为：

d3.format('05.2f'); // 0-padding, string width 5, 2 decimal places

将此插入doc示例（注意，我还适当地更改了regex并添加了百分号）：

---

哇，非常感谢！在引用文档和让我意识到将格式化程序推到d3.0中时，它像一个符咒和+1一样工作

d3.interpolators.push(function(a, b) {
  var re = /^(\d\d\.\d\d)%$/, ma, mb, f = d3.format('05.2f');
  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) + '%';
    };
  }
});

d3.interpolate("00.00%", "30.00%")(1/5); // "06.00%"
d3.interpolate("00.00%", "30.00%")(1/3); // "10.00%"