D3.jsのformatを整理

More than 3 years have passed since last update.

D3.jsのd3.format便利ですよね。良く使う桁数の指定やゼロ埋めが少し分かりづらかったのでQiitaにまとめます。

d3.format("01d")(1); // 1

d3.format("02d")(1); // 01
d3.format("03d")(1); // 001
d3.format(".0d")(100); // 100
d3.format(".1d")(100); // 100
d3.format(".2d")(100); // 100
d3.format(".0f")(100); // 100
d3.format(".1f")(100); // 100.0
d3.format(".2f")(100); // 100.00
d3.format(".0%")(1); // 100%
d3.format(".1%")(1); // 100.0%
d3.format(".2%")(1); // 100.00%

dを指定すると小数点の値が表示されないのでその場合はfを使います。

.0、.1と小数点以下の表示する桁数が増え、01、02の場合はゼロ埋め桁数が増えていきます。


d3#format の書式を概要だけ説明

d3#formatの書式は以下のようになっています。

[​[fill]align][sign][symbol][0][width][,][.precision][type]

分かりやすく分解して簡単に説明すると


  • fill


    • 詰めるのに使う文字。例えば d3.format("z<6d")(1) は"1zzzzz"になる。



  • align


    • 右詰め(>)や左詰め(<)など



  • sign


    • プラス(+)マイナス(-)など



  • symbol


    • 通貨の$やバイナリー指定など



  • 0


    • ゼロ埋め



  • width


    • ゼロ埋めする最少桁数



  • ,


    • 1,000とカンマ(,)を入れる



  • .precision


    • 小数点以下の桁数



  • type


    • %とかdとかf




参照情報