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