Question

我正在绘制一张图表，它获取美元价值（从0到数百万），我正在尝试显示不错的价格。我已经使用d3.nice来获得5个滴答，这些滴答都有很好的值，非常酷。但由于存在如此大的差异，我正在努力正确显示我的美元价值。

我希望：

0-999：显示自己
1,000 - 999,999：显示1k-999k（如果999,500显示1M，则可以，但使用d3.format（＆＃39; .3s＆＃39;）无法显示1.00k）或使用d3.format（＆＃39; .1s＆＃39;）将467k转到400k）
1,000,000 - 999,999,999：显示1M-999M（如果它在舍入时翻转也可以）

在d3版本4之前，这很容易。你可以这样做：

.ticks((d) => {
  var prefix = d3.formatPrefix(d);

  return prefix(d).toFixed()+''+prefix.symbol;
})

但是现在，在我失败后，我正在阅读d3 v4文档，它说：

d3.formatPrefix方法已更改。它不返回SI前缀字符串，而是返回给定说明符和参考值的SI前缀格式函数。例如，要格式化数千：

var f = d3.formatPrefix（＆＃34;，。0＆＃34;，1e3）;

F（1E3）; //＆＃34; 1k＆＃34;

F（1E4）; //＆＃34; 10k＆＃34;

F（1E5）; //＆＃34; 100k＆＃34;

F（1E6）; //＆＃34; 1,000k＆＃34;

现在这似乎无法实现，因为我想改变有效数字的数量，但我认为没有明显的方法来实现这一点。我错过了一些简单的东西吗？

Answer 1

如果我正确理解了您想要的输出，您可以使用数字本身来定义value的{{1}}。

看看这个演示：

＆＃13;

d3.formatPrefix

＆＃13;

[1, 999, 1000, 999000, 1000000].forEach(function(d) {
  var prefix = d3.formatPrefix(".0", d)
  console.log(d + ": " + prefix(d))
})

＆＃13;

PS：使用这种方法，<script src="https://d3js.org/d3.v4.min.js"></script>将为您提供1000k，而不是1M。

Answer 2

好吧，我想这很容易，但有点hacky。这是我用来做这种行为的格式化程序函数：

{{1}}

我会很乐意使用更好的东西，所以如果你的答案更清晰，那么我会接受。

将数字格式化为带有SI前缀的整数

2 个答案: