d3.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..

파이어볼

안녕하세요. 루루개발자 입니다. 금일 회사에서 곧 오픈할 서비스의 약관에 대한 내용을 기획자분께 전달받아 해당 내용대로 HTML 마크업 작업을 진행 하던 도중 겪은 일에 대해 공유드리고자 합니다. 먼저, 다음과 같이 코드를 작성했다고 합시다. 첫번째 아이템입니다. 두번째 아이템입니다. 가. 첫번째 아이템입니다. 나. 두번째 아이템입니다. 첫번째 ol 태그는 목록 앞의 마커를 기본 값으로 사용하였고, 두번째 ol 태그에서는 가, 나, 다.. 로 시작하는 옵션을 css 에서 제공해주지 않기 때문에 list-style-type을 none 으로 줘서 목록 앞에 표시되는 기본 마커를 없앤 뒤 수기로 내용 앞에 "가", "나" 등의 글자를 적어주었습니다. 하지만 보시는대로 기본 마커는 컨텐츠가 차지하고 있는 영역의..

안녕하세요. 루루개발자 입니다. 요즘 3D 에 관심이 생겨서 블렌더를 공부해보고 있습니다. 블렌더 관련 단축키들을 정리하려고 구글 docs 로 정리를 하고 있었는데.. 생각지도 못한 불편함이 있었습니다. 왼쪽에 표시되는 문서 개요에서 너비가 작아서 각 문단별 제목이 짤려 일부가 안보이는데.. 이 너비를 조정할수가 없었습니다. ms office word 에서는 그게 되는데 말이죠. 그래서 급한대로.. (크롬기준) 개발자도구를 열어 콘솔 창에 아래 코드를 입력하면 원하는 너비로 강제로 늘려서 제목을 더 길게 확인 할 수 있게 하였습니다. (function(sideBarWidth){ document.querySelector('.left-sidebar-container.docs-ui-unprintable.lef..

d3.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'); ..

d3.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 의..

d3.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..

d3.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(`===============..