使用 SI 代码绘制图形几乎是我们想要的。我们的 y 轴值往往是较大的货币值。例如:$10,411,504,201.20
简而言之,至少在美国语言环境中,这应该转化为 $10.4B。
但是对于 SI 代码使用 d3.format 的 's' 类型,这将显示为 $10.4G。这对于某些语言环境可能非常有用,并且在处理基于计算机的值(例如:处理器速度、内存...)时可能会很好,但对于货币或其他非计算机类型的值则不然。
有没有办法获得类似于 SI 代码的特定于语言环境的功能,可以将数十亿转换为 B 而不是 G 等......?
(我意识到这主要是 SI 代码的事情,而不是特定于 D3,但由于我使用的是 D3,这似乎是最合适的标签。)
最佳答案
我更喜欢覆盖 d3.formatPrefix。然后你就可以忘记替换可视化代码中的字符串了。只需在加载 D3.js 后立即执行以下代码即可。
// Change D3's SI prefix to more business friendly units
// K = thousands
// M = millions
// B = billions
// T = trillion
// P = quadrillion
// E = quintillion
// small decimals are handled with e-n formatting.
var d3_formatPrefixes = ["e-24","e-21","e-18","e-15","e-12","e-9","e-6","e-3","","K","M","B","T","P","E","Z","Y"].map(d3_formatPrefix);
// Override d3's formatPrefix function
d3.formatPrefix = function(value, precision) {
var i = 0;
if (value) {
if (value < 0) {
value *= -1;
}
if (precision) {
value = d3.round(value, d3_format_precision(value, precision));
}
i = 1 + Math.floor(1e-12 + Math.log(value) / Math.LN10);
i = Math.max(-24, Math.min(24, Math.floor((i - 1) / 3) * 3));
}
return d3_formatPrefixes[8 + i / 3];
};
function d3_formatPrefix(d, i) {
var k = Math.pow(10, Math.abs(8 - i) * 3);
return {
scale: i > 8 ? function(d) { return d / k; } : function(d) { return d * k; },
symbol: d
};
}
function d3_format_precision(x, p) {
return p - (x ? Math.ceil(Math.log(x) / Math.LN10) : 1);
}
运行此代码后,尝试使用 SI 前缀格式化数字:
d3.format(".3s")(1234567890) // 1.23B
您可以通过在对象中包含特定于语言环境的
d3_formatPrefixes
值来简单地扩充此代码以支持不同的语言环境,然后选择与您需要的语言环境相匹配的正确值。
关于d3.js - 如何使用 d3.format 获取可本地化或可自定义的 si 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17037023/