- [ Node.js & Javascript & Typescript/d3.js ][010] d3.area2022-07-13 17:38:18d3.area d3.area 는 선 밑으로 영역을 그릴 때 사용되는 함수입니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; interface Data { x: number; y: number; } window.addEventListener('load', function() { const data: Data[] = [ {x: 0, y: 20}, {x: 10, y: 15}, {x: 20, y: 50}, {x: 30, y: 35}, {x: 40, y: 70}, {x: 50, y: 115}, {x: 60, y: 89}, {x: 90, y: 6..
- [ Node.js & Javascript & Typescript/d3.js ][009] d3.arc2022-07-12 21:52:23d3.arc d3.arc 는 호를 그릴 때 사용됩니다. 원형 그래프를 그릴 때 유용하게 사용될 수 있습니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; window.addEventListener('load', function() { const svgD3Instance = d3.select('svg').append("g"); svgD3Instance.append("path") .attr("class", "arc") .attr("d", function(d) { return d3.arc()({ innerRadius: 40, outerRadi..
- [ Node.js & Javascript & Typescript/d3.js ][008] d3.active2022-07-08 22:56:42d3.active d3.active 는 현재 transition이 활성화된 노드를 반환하는 함수입니다. 연속적으로 연결된 transition 을 구현할 때 유용하게 사용됩니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; // https://github.com/d3/d3-transition#active // https://www.geeksforgeeks.org/d3-js-interpolatergb-function/ // https://runebook.dev/en/docs/d3/d3-transition?page=2#transition_tw..
- [ Node.js & Javascript & Typescript/d3.js ][007] d3.ZoomTransform2022-06-30 21:03:14d3.ZoomTransform d3.ZoomTransform 는 생성자의 인자로 translateX, translateY, scale 이렇게 3개 값을 받아 객체를 반환하는 클래스 입니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; // https://github.com/d3/d3-zoom#ZoomTransform_ window.addEventListener('load', function() { const w = 400; const h = 400; const canvas = document.createElement('canvas'); ..
- [ Node.js & Javascript & Typescript/d3.js ][006] d3.Voronoi2022-06-29 22:36:25d3.Voronoi d3.Voronoi 는 보로노이 다이어그램을 그리기 위해 사용되는 클래스이며, d3.Delaunay 의 voronoi 함수를 사용하는 방식의 다른 적용 방식입니다. d3-delaunay 포스팅 글을 참조하세요. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; export declare namespace ID3VOronoi { export interface PointData { x: number; y: number; } } window.addEventListener('load', function() { // canvas 의..
- [ Node.js & Javascript & Typescript/d3.js ][005] d3.InternSet2022-06-28 20:56:15d3.InternSet d3.InternSet 은 javascript 의 Set 과 동일한 기능을 하는 클래스 입니다. 똑같이 Value 를 add 할 수 있고 Value 를 가지고 있는지 여부와 size 등을 조회할 수 있습니다. 예제 만약 아래와 같은 코드가 있다고 해봅시다. const jsSet = new Set(); jsSet.add(new Date(2021, 4, 1)); jsSet.add(new Date(2022, 3, 8)); jsSet.add(new Date(2022, 3, 8)); console.log(`jsSet`, jsSet); console.log(`==============================`); const d3InternSet = new d3.InternSet(); d..
- [ Node.js & Javascript & Typescript/d3.js ][004] d3.InternMap2022-06-27 20:30:40d3.InternMap d3.InternMap 은 javascript 의 Map 과 동일한 기능을 하는 클래스 입니다. 똑같이 Key, Value 쌍으로 데이터를 지정하고 Key 로 Value 를 가져올 수 있습니다. 예제 기존 javascript 의 Map 과 달리 d3.InternMap 은 Key 로 Date 객체를 사용할 수 있습니다. 만약 아래와 같은 코드가 있다고 해봅시다. const jsMap = new Map(); jsMap.set(new Date(2022, 7, 1), 'jsMap Data!'); console.log(`jsMap.get(new Date(2022, 7, 1))`, jsMap.get(new Date(2022, 7, 1))); console.log(`===============..
- [ Node.js & Javascript & Typescript/d3.js ][003] d3.FormatSpecifier2022-06-20 22:59:27d3.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: ..