- [003] d3.FormatSpecifier2022년 06월 20일
- 루루개발자
- 작성자
- 2022.06.20.:59
반응형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 가 특정 포맷에 맞춰 출력되고 있는 것을 알 수 있습니다.
참고
GitHub - d3/d3-format: Format numbers for human consumption.
Format numbers for human consumption. Contribute to d3/d3-format development by creating an account on GitHub.
github.com
https://github.com/d3/d3-format#locale_formatPrefix
GitHub - d3/d3-format: Format numbers for human consumption.
Format numbers for human consumption. Contribute to d3/d3-format development by creating an account on GitHub.
github.com
https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/#d3_format
Formatting - D3 wiki
Wiki ▸ [[API Reference]] ▸ [[Core]] ▸ Formatting Formatting numbers is one of those things you don't normally think about until an ugly "0.30000000000000004" appears on your axis labels. Also, maybe you want to group thousands to improve readability,
d3-wiki.readthedocs.io
반응형'Node.js & Javascript & Typescript > d3.js' 카테고리의 다른 글
[006] d3.Voronoi (0) 2022.06.29 [005] d3.InternSet (0) 2022.06.28 [004] d3.InternMap (0) 2022.06.27 [002] d3.Delaunay (0) 2022.06.13 [001] d3.Adder (0) 2022.06.12 다음글이전글이전 글이 없습니다.댓글