4

我正在使用 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”，尾随零被切断。

有什么建议么？

4

1 回答 1

6

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

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%"
于 2012-09-25T16:49:31.433 回答