greatsumini / d3-tree-visualization

json 데이터를 입력 받아 radial-tidy-tree를 그려줍니다.

김보창을 위한 외주 프로젝트

Introduction

정해진 규격의 json을 입력해 Radial Tidy Tree를 렌더링합니다. 미리 입력된 Example 데이터를 사용해볼 수도 있습니다. d3.js를 사용했습니다.

Live Demo

2021-08-03 추가
D3Client를 추가해 리팩토링 해봤습니다. 목적은 다음과 같습니다.

1. 리팩터링 2판에서 읽어본 기법들 적용해보기.
2. SOLID 규칙을 적용해보기 (특히 Dependency Inversion)
3. 개발바닥 유튜브에서 향로님이 되도록 Class를 사용해보는게 좋다길래

Getting Started

# clone
git clone https://github.com/greatSumini/d3-tree-visualization

cd d3-tree-visualization

npm install
# or
yarn install

npm run dev
# or
yarn dev

Deploy with Vercel

Ref

https://observablehq.com/@d3/radial-tidy-tree

d3-tree-visualization's Issues

Svg 관련 로직 분리하기

사실 helper로 구현할지 좀 고민이다.. helper와 client의 차이를 명확히 두는게 어려운 포인트인 것 같다.
지금생각: client는 외부 dependency에 대한 provider 느낌! 어떤 개념에 대한 추상화된 인터페이스를 제공한다. 반면에 helper는 하나의 feature다.
Svg는 toObjectUrl, getViewBox, export 등 class로 만들었을 때 재미볼만한 부분이 좀 있는 것 같은데 client라는 네이밍이 너무 거슬린다.. manager라는 building block을 추가해야하나 싶기도하다.

• dom.helper.ts: createSvgObjectUrl(svgEle: SVGSVGElement): string
• dom.helper.ts: downloadObjectUrl(objectUrl: string): void

21-08-03 12:21 수정
한 helper.ts 파일에 하나의 helper 함수만 존재하도록 리팩토링 하는 것도 좋을 것 같다. 연관된 helper들의 묶음을 표현하고 싶은 경우 디렉토리를 사용한다. 변경 후 예상 구조는 다음과 같다.

src/helpers
  - download-object.url.helper.ts
  - clean-file-data.helper.ts
  - is-freq-node.helper.ts
  - svg
    - create-svg-object-url.helper.ts
    - get-svg-view-box.helper.ts