D3 관련 정리

2022년 9월 5일 · 약 3분

brown

FE developer

Intro

D3로 차트를 구현해달라는 요구사항을 받았었다.

horizontal Pannable
hover
double line

참고로 태그는 z-index, SVG는 그려진 순서대로 쌓여나간다

기존에 trading-view 차트도 다뤄보고 canvas로 차트도 그려봤으니 어렵게 생각하진 않았던 task 였는데

생각보다 어려웠고, 시간이 더 걸렸다.

오래 된 library 라서 코드가 조금씩 다르다.
- v7로 작업했는데, 인터넷에 돌아다니는 예시코드, 듀토리얼등은 대부분 v3,v4
러닝 커브가 예상 보다 높아서, 그냥 갖다 붙이면 되는 라이브러리가 아니라 학습이 필요하다.

그래서 새로운 한국인 사용자를 위해 기록을 남긴다.

D3 간단 설명

D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

D3.js는 데이터를 기반으로 문서를 조작하기 위한 자바스크립트 라이브러리이다. D3는 HTML, SVG 및 CSS를 사용하여 데이터를 생동감 있게 만들 수 있도록 도와줍니다.

D3 with React

NextJS + typescripts 로 사용했다.

D3 study

밑바닥 부터 시작하는 d3.js (version 4) 와 Typescript 를 이용한 데이터 가시화

영어자료가 한글로 번역 된 자료

dashingd3js

한번 쭉 따라해보면, 도움되는 사이트

중요한 파트는 Use D3.js To Bind Data to DOM Elements이다.

Intro​

D3 간단 설명​

D3 with React​

D3 study​

밑바닥 부터 시작하는 d3.js (version 4) 와 Typescript 를 이용한 데이터 가시화​

dashingd3js​