[003] d3.FormatSpecifier

 

d3.FormatSpecifier

---

d3.FormatSpecifier 는 다양한 포맷 관련 옵션들을 인자로 받아 specifier 을 얻도록 해주는 클래스 입니다. 그렇기 때문에 d3.format 함수와 같이 사용될 수 있습니다.

 

 

예제

---

먼저 typescript 코드를 다음과 같이 작성합니다.

import * as d3 from 'd3';

window.addEventListener('load', function() {
  const formatSpecifier = new d3.FormatSpecifier({
    align: '^',  
    comma: true as any, // boolean 값이 맞으나, @type 에는 string 으로 지정되어 있어 as any 를 붙였습니다.
    fill: '',
    precision: '5',
    sign: '-',
    symbol: '#',
    trim: true as any, // boolean 값이 맞으나, @type 에는 string 으로 지정되어 있어 as any 를 붙였습니다.
    type: 'd',
    width: '8',
    zero: true as any, // boolean 값이 맞으나, @type 에는 string 으로 지정되어 있어 as any 를 붙였습니다.
  });
  console.log('formatSpecifier', formatSpecifier);

  const formatter1 = d3.format(formatSpecifier.toString());
  console.log(`formatter1(2)`, formatter1(2));
  console.log(`formatter1(-2)`, formatter1(-2));
});

 

위 typescript 코드를 esbuild 등으로 번들링 하여 나온 js 파일을 html 상에서 script 태그로 불러와 html 을 브라우저에서 열어보면 다음과 같이 콘솔 창을 확인 할 수 있습니다.

보시다시피, 숫자 2와 -2 가 특정 포맷에 맞춰 출력되고 있는 것을 알 수 있습니다.

 

 

참고

---

https://github.com/d3/d3-format

GitHub - d3/d3-format: Format numbers for human consumption.

https://github.com/d3/d3-format#locale_formatPrefix

GitHub - d3/d3-format: Format numbers for human consumption.

https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/#d3_format

Formatting - D3 wiki