如何在 5.7.0 版本的 D3.js 中制作自定义千位分隔符和小数字符

Posted 2023-04-14

【中文标题】如何在 5.7.0 版本的 D3.js 中制作自定义千位分隔符和小数字符

【英文标题】：How to make custom thousand separator and decimal character in D3.js in Version 5.7.0

【发布时间】：2021-05-31 13:34:06

【问题描述】：

我正在尝试在 D3.js 中添加自定义千位分隔符和十进制字符 我按照以下链接进行操作，但该解决方案适用于 3.4.11 版，但我希望将其用于 5.7.0 版： How to add a (custom) thousand separator in D3?

下面是代码：

// custom localization options
var myLocale = 
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""]



// create custom locale formatter from the given locale options
const localeFormatter = d3.locale(myLocale);

const formater = ",.2f";
// create a formatter for the number (grouped thousands with two significant digits). By default ',' means 'thousands' but we switched that into a '.' in our custom localization
const numberFormat = localeFormatter.numberFormat(formater);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

【问题讨论】：

***.com/a/42068175/367865

【参考方案1】：

d3.locale 现在是 d3.formatLocale：

const localeFormatter = d3.formatLocale(myLocale);

虽然我们可以使用以下方式创建格式：

const numberFormat = localeFormatter.format(formater);

相对于localeFormatter.numberFormat(formater);

// custom localization options
var myLocale = 
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""],



// create custom locale formatter from the given locale options
const localeFormatter = d3.formatLocale(myLocale);

const formater = ",.2f";
// create a formatter for the number (grouped thousands with two significant digits). By default ',' means 'thousands' but we switched that into a '.' in our custom localization
const numberFormat = localeFormatter.format(formater);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

自定义区域设置也可以像 d3.formatPrefix 一样使用，以允许使用 SI 前缀并指定应使用多少个小数点：

// custom localization options
var myLocale = 
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""],



// create custom locale formatter from the given locale options
const localeFormatter = d3.formatLocale(myLocale);

// custom number format:
const numberFormat = n=>localeFormatter.formatPrefix(".2", n)(n);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10010000235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

【讨论】：

上述代码是否也适用于自定义数字格式，如 €10.5k、€2567 万、€32.56B 等？

您需要不同的方法（自定义区域设置与否）来处理动态精度和 SI 单位，请参阅 here

（您可以使用localeFormatter.formatPrefix，因为链接答案中使用了d3.formatPrefix）

localeFormatter.formatPrefix 不会给出所需的输出，如 K、百万、十亿等。我检查了 Link，我可以看到 k 代表公斤，M 代表兆。这是正确的数字格式吗？也没有可用的“B”SI 前缀。

早上再看