javascript - 在 d3 中格式化内插字符串或数字

Question

我正在使用 d3 对文本进行动画处理，以显示用户完成任务的进度。例如，如果他们已完成任务的 32.51%，则文本将在 2 秒左右的时间内从 0% 动画化到 32.51%。

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

作为测试，我尝试通过将 a 和 b 值设置为插值器来指定我想要的格式，就像这样 d3.interpolate("00.00", "30.00")，但是最终文本是“30”，尾随零被 chop 。

有什么建议吗？

Answer 1

您可以将自定义插值器添加到 d3.interpolators - 参见 the docs .文档中给出的示例与您的非常接近 - 唯一真正的变化是指定输出格式，在您的情况下应该是:

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

将其插入到文档示例中(请注意，我还适本地更改了正则表达式并添加了百分号):

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%"