如何更改 D3.format 以显示实数后缀而不是字节后缀答案

【问题标题】：How to change D3.format to display real number suffix instead of Byte suffix如何更改 D3.format 以显示实数后缀而不是字节后缀
【发布时间】：2016-12-30 05:23:15
【问题描述】：

新手警告！我在 JavaScript 和 SVG 方面的经验极度过时了，我对 d3 完全陌生。

我刚刚了解到 d3.format('s') 将显示 160,000 到 160k 之类的数字和 20,000,000,000 到 20G 之类的数字。惊人的！！只有一个很小的问题。这是一种以字节为单位的科学记数法的格式。我假设（可能不正确）必须有一个附加参数，d3 使用它来显示千 (16T) 和百万 (160M) 和十亿 (20B) 中的数字，而不是字节。没有？

我发现了另一个问题how to get localizable or customizable si codes with d3.format 并查看了其他类似的问题，但还没有找到我认为真正的答案。如果我想要做的不是 d3 中的一个功能，但有一个变通方法，我可能需要一些帮助来实现它。

我一直在逐步浏览 d3 代码以尝试了解如何使用其他输入参数、si 代码、前缀、类型等，甚至尝试从此处的教程中收集一些信息：D3.format tutorial through examples

很明显，一个人只需要成为 D3 方面的专家。所以，在没有时间的情况下，我请求 D3 大师帮忙。

【问题讨论】：

见问题#2241 d3.format() for number abbreviations (similar to SI-prefix)。
@Patricia 稍微更正一下：K、M、G 等不是“以字节为单位的科学记数法”，正如您所说。这是 Système International d'unités 对于everything 的公制前缀。因此，使用 SI 前缀，1000 米是 1Km（公里），1000000 米是 1Mm（兆米），依此类推。这也适用于质量（克）、体积（升）、温度（开尔文）、能量（焦耳）等...
@GerardoFurtado - 很高兴知道！知道这一点，意味着本地化真的是我想在这里做的吗？是吗？

标签： d3.js

【解决方案1】：

这是一个改编自another question的自定义格式化函数：

function getFormatter(digits) {
  var notations = [
    // { value: 1E12, suffix: "T" }, what you'll use for trillion?
    { value: 1E9,  suffix: "B" },
    { value: 1E6,  suffix: "M" },
    { value: 1E3,  suffix: "T" }        
  ]

  rx = /\.0+$|(\.[0-9]*[1-9])0+$/

  return function(num) {
        var notation
    for (var i = 0; i < notations.length; i++) {
      notation = notations[i]
      if (num >= notation.value) {
        var value = num / notation.value
        value = value.toFixed(digits)
        value = value.replace(rx, "$1")
        return value + notation.suffix
      }
    }
  }
}


var numbers = [
  20000000000,
  160020,
  18200000
]

d3.select('body')
  .append('ul')
  .selectAll('li')
  .data(numbers)
  .enter()
  .append('li')
  .text(getFormatter(2))

span {
  display:
}

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

希望只有 notations 变量与您的问题相关。但是，如果您需要任何进一步的说明，请告诉我。祝你好运！

【讨论】：