如何更改 D3.format 以显示实数后缀而不是字节后缀 [英] How to change D3.format to display real number suffix instead of Byte suffix

问题描述

新手警报！我在 JavaScript 和 SVG 方面的经验非常过时了，我对 d3 完全陌生.

Newbie Alert! My experience with JavaScript and SVG is EXTREMELY dated and I am completely new to d3.

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

I've just learned that d3.format('s') will display a number like 160,000 to 160k and a number like 20,000,000,000 to 20G. AWESOME!! There is just one teeny-tiny problem. This is a format for Scientific Notation in Bytes. I assume (maybe incorrectly) there must be an additional parameter that d3 uses to display numbers in Thousands (16T) and Millions (160M) and Billions (20B) instead of Bytes. No?

我发现了另一个问题如何使用 d3.format 获取可本地化或可自定义的 si 代码，并查看了其他类似的问题，但尚未找到我认为的真正答案.如果我想要做的不是 d3 中的功能，但有一个变通方法，我可能需要一点帮助来实现它.

I have found another question how to get localizable or customizable si codes with d3.format and have looked at other similar questions but have yet to find what I believe to be the real answer. If what I am trying to do is not a feature in d3 but there is a work-around, I might need a little help implementing it.

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

I have been stepping through the d3 code to try to understand how to use the the other input parameters, si codes, prefix, type, etc. and even tried to glean some information from a tutorial here: D3.format tutorial through examples

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

It's become pretty clear that one needs to be an expert in D3 alone. So, in the absence of time, I'm asking for a D3 guru to please help.

推荐答案

这是一个改编自 另一个问题:

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:
}

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

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

Hopefully only the notations variable is relevant to your problem. But let me know if you need any further clarification. Good luck!

这篇关于如何更改 D3.format 以显示实数后缀而不是字节后缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！