LoginSignup
16

More than 5 years have passed since last update.

D3.jsのformatを整理

Posted at

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

参照情報

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16