Question

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

为此，我在svg文本元素上结合d3.interpolate使用d3的attrTween方法。插值工作得很好，但我在格式化文本方面遇到了一些麻烦。我希望文本总是显示4位数，所以0％= 00.00％，4.31％= 04.31％等。能够这样做而不必发布内插器返回的内容会很好。换句话说，无需获取返回的百分比并检查是否有4位数字并在将其放入DOM之前在任一侧添加零填充。

作为测试，我尝试通过将a和b值设置为插值器来指定我想要的格式，如d3.interpolate("00.00", "30.00")，但最终文本为“30”，尾随零被截断。< / p>

有什么建议吗？

Answer 1

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

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

将其插入doc示例（请注意，我还适当地更改了正则表达式并添加了百分号）：

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

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

1 个答案: