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

Question

我正在尝试在 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>

Answer 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>