방명록
- [003] d3.FormatSpecifier2022년 06월 20일 22시 59분 27초에 업로드 된 글입니다.작성자: 루루개발자
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#locale_formatPrefix
https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/#d3_format
'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 다음글이 없습니다.이전글이 없습니다.댓글