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

Question

我正在绘制一个图表，它获取美元值（从 0 到数百万），并且我试图显示漂亮的刻度。我已经使用 d3.nice 获得了 5 个都具有不错值的价格变动，这非常酷。但由于差异如此之大，我很难正确显示我的美元价值。

我想做：

0-999: 显示本身
1,000 - 999,999：显示 1k-999k（999,500 显示 1M 可以，但使用 d3.format('.3s') 显示 1.00k 则不行，或者有 467k使用 d3.format('.1s'))
达到 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 文档，它说：

The d3.formatPrefix method has been changed. Rather than returning an SI-prefix string, it returns an SI-prefix format function for a given specifier and reference value. For example, to format thousands:

var f = d3.formatPrefix(",.0", 1e3);

f(1e3); // "1k"

f(1e4); // "10k"

f(1e5); // "100k"

f(1e6); // "1,000k"

现在这似乎不可能完成，因为我想改变有效数字的数量，但我看不出有什么明显的方法可以实现。我错过了一些简单的东西吗？

Answer 1

好吧，我想这很简单，但有点老套。这是我用来实现此行为的格式化程序函数：

(val) => {
  let prefix = d3.formatPrefix('.3s', val);

  let str = prefix(val);

  if (val === 0) {
    return '0';
  }

  return parseInt(str.slice(0, str.length - 2))+''+str.slice(str.length - 1);
}

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

Answer 2

如果我正确理解你想要的输出，你可以使用数字本身来定义 d3.formatPrefix 的 value。

看看这个演示：

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

<script src="https://d3js.org/d3.v4.min.js"></script>

PS：使用这种方法，999500会给你1000k，而不是1M。

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

Format numbers to integers with SI prefix

javascript

string-formatting

d3.js