jquery D3:格式化刻度值,显示B(Billion)而不是G(Giga)

piv4azn7  于 2023-04-20  发布在  jQuery
关注(0)|答案(4)|浏览(103)

我想把Y轴的数据格式化成D3折线图。它是关于世界人口的,所以这是相当大的。
我目前使用下面的代码,这是显示“G”而不是“B”。

d3.format("s")

我研究了一下,发现这里的“G”代表Giga,有没有办法把它改成B,B代表Billion?
谢谢。

5tmbdcev

5tmbdcev1#

如果你喜欢SI前缀的格式,但不喜欢实际的前缀,只需要用一个简单的.replace交换它:

var f = d3.format("0.2s");

document.write(
  f(1e9).replace(/G/,"B")
);
<script src="https://d3js.org/d3.v4.min.js"></script>
rxztt3cl

rxztt3cl2#

如果你不想全局覆盖这个库,但是你想在这个地方使用你的“B”函数,就像d3.format一样:

import { format } from 'd3-format';
export const formatBillions = fs => s => format(fs)(s).replace(/G/, "B");
4uqofj5v

4uqofj5v3#

如果您想在全球范围内应用Mark的答案,我使用了以下方法

fcopy = d3.format;
function myFormat(){ 
         function_ret = fcopy.apply(d3, arguments) 
         return (function(args){return function (){ 
                return args.apply(d3, arguments).replace(/G/, "B");
         }})(function_ret) 
} 
d3.format = myFormat;

我在Superset中也遇到了同样的问题,我在static/dashboard文件中添加了这个。

zte4gxcn

zte4gxcn4#

对于那些需要使用plotly.js(在后台使用d3)的人,您可以为轴提供exponentformat,以及可选的tickprefix,如果您希望tick格式为$1B而不是$1G)(请参阅exponentformat接受的值的详细信息的类型):

import { Layout } from "plotly.js";

const layout: Partial<Layout> = {
  xaxis: {
    ... // your other layout values
    tickprefix: "$", // use manual prefix as we can't use `tickformat` w/ `exponentformat`
    exponentformat: "B", // use billions not giga
  },
}

相关问题