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

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",尾随零被截断.

有什么建议？

Answer 1

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

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