Angular 공부 ( D3.js )

0. D3.js

- D3.js는 데이터를 기반으로 문서를 조작하기 위한 JavaScript 라이브러리

- HTML, SVG 및 CSS를 사용하여 데이터에 생명을 불어넣도록 도와줌

- D3는 강력한 시각화 구성 요소와 DOM 조작에 대한 데이터 중심 접근 방식을 결합하여 브라우저의 모든 기능을 제공

- D3를 사용하면 임의의 데이터를 DOM(문서 개체 모델)에 바인딩한 다음 데이터 기반 변환을 문서에 적용 가능

 

1. D3 개발환경 세팅

1-1. 공식사이트 설치

- 공식사이트 링크에서 설치하여 폴더에 첨부

- 공식사이트 : https://d3js.org/

D3.js - Data-Driven Documents

 

1-2. CDN 방식

<script src="https://d3js.org/d3.v7.min.js"></script>

- 해당 스크립트 문구를 작성

 

1-3. npm 설치

npm install d3
npm i --save-dev @types/d3
npm install d3-axis

- npm 명령어를 이용하여 설치

 

2. D3 기본 문법

● d3.select – 특정 태그 하나를 선택한다.

● d3.selectAll – 특정 태그 전체를 선택한다.

● selection.attr – 선택 태그의 속성값 지정한다.

● selection.data – 집어넣을 즉 차트에 사용할 데이터를 가져온다.

● selection.enter – 데이터 개수만큼 태그가 부족할 시에 추가한다.

                               (ex 데이터가 5개, p태그가 3개일시 데이터 개수에 맞게 p태그 2개를 더 추가한다.)

● selection.exit– 데이터 개수보다 태그가 많을 시에 제거한다.

                               (ex 데이터가 5개, p태그가 3개일시 데이터 개수에 맞게 p태그 2개를 더 추가한다.)

● selection.append – 새로운 태그를 추가한다.

● selection.remove– 새로운 태그를 제거한다.

 

- 추가 문법 참조 : https://github.com/zziuni/d3/wiki/API-Reference

GitHub - zziuni/d3: D3.js API Doc Translated to korean.

 

3. 간단한 도형그리기

⚫기본세팅 

const canvas = d3.select('.canvas');

const svg = canvas.append('svg') //추가
   .attr('height', 1000) // 속성 지정
   .attr('width', 1000);

 

- HTML 태그 요소 받아와 svg 태그 생성

 

⚫텍스트 ( text )

svg.append('text') // 추가, text 형태로 추가
   .attr('x', 200)
   .attr('y', 200) // 좌측 하단 기준 좌표
   .text('hello world')
   .style('font-weight', 'bold')
   .style('font-size', '34px')
   .style('font-family', 'Pacifico');

- .append('text').attr('x',좌표).attr('y', 좌표).text(문구).style('옵션','값')

- 해당 태그 내부에 좌표값에 따른 텍스트 생성

 

⚫선 ( line )

svg.append('line')
   .attr('x1', 200) // x축 시작
   .attr('y1', 200) // y축 시작
   .attr('x2', 300) // x축 끝
   .attr('y2', 300) // y축 끝
   .attr('stroke', 'red');

- .append('line').attr('x1',좌표).attr('y1', 좌표).attr('x2',좌표).attr('y2', 좌표).attr('stroke','색상')

- 시작점과 끝점을 연결하는 라인 생성

- 시작점 ( x1, y1 ), 끝점 ( x2, y2 ) 좌표 연결

- stroke 는 선 색상

- stroke-width 는 선 굵 

 

⚫사각형 ( rect )

svg.append('rect') // 추가, 사각형 형태로 추가
   .attr('x', 200)
   .attr('y', 200)
   .attr('width', 200)
   .attr('height', 200)
   .attr('fill', 'hotpink');

- .append('line').attr('x',좌표).attr('y', 좌표).attr('width',가로크기).attr('height', 세로크기).attr('fill','색상')

- x,y좌표를 기준으로 사각형 생성

- width는 가로크기, height는 세로 크기

- fill은 채우는 색상

- stroke 적용 가능

 

⚫원 ( circle )

svg.append('circle') // 추가, 원 형태로 추가
            .attr('cx', 200) // x 축
            .attr('cy', 200) // y 축
            .attr('r', 50)
            .attr('fill', 'blue');

- .append('line').attr('cx',좌표).attr('cy', 좌표).attr('r',반지름).attr('fill','색상')

- 중심좌표 ( cx, cy )를 기준으로 반지름 r인 원 생성

- fill은 채우는 색상

- stroke 적용 가능

 

4.SVG

4-1. SVG란?

- 확장 가능한 벡터 그래픽 (scalable vector graphics)으로 XML 기반 2차원 그래픽

- HTML 태그의 집합으로 css와 javascript로 컨트롤 가능

 

4-2. SVG의 장점

- 아무리 확대를 해도 이미지가 깨지지않음

- 이미지의 크기를 키워도 용량이 늘어나지 않음

 

4-3. SVG의 단점

- 코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커짐

- 단순한 모양일수록 효율이 좋음

- 복잡한 이미지를 굳이 svg로 표현하고자 하면 오히려 용량이 너무 거대해져 역효과가 날 수 있음

- 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용

 

▶ PNG ↔ SVG 변환 사이트 : https://convertio.co/kr/png-svg/

PNG SVG 변환 (온라인 무료) — Convertio

 

5. 데이터 로드 ( csv, tsv, json, xml )

- csv : Comma-Separated Value

- tsv : Tap-Separated Value

파일	명령어
csv	d3.csv('경로')
tsv	d3.tsv('경로')
json	d3.json('경로')
xml	d3.xml('경로')

- angular에서 사용할 때 경로를 적으면 연결된 url주소로 이동

- 따라서 assets폴더에 넣어주고 경로 지정하면 url이 아닌 파일 경로로 호출

 

// 프로미스 형식으로 나옴
console.log(d3.json("/assets/data/data.json"))

//then, catch 구문을 이용하여 사용
d3.json("/assets/data/data.json")
  .then(data=> {
            console.log(data)
        });
   .catch(err => {
             console.log(err)
        });

- promise 형식으로 데이터 값을 불러오기 때문에 then, catch 구문을 이용하여 데이터 사용 

 

6. 데이터 컨트롤

  - domain : 데이터 값의 범위

  - range : 화면 출력 값의 범위

6-1. scalePoint()

  - 간격에 맞게 값을 변경

// range는 전체 width
// domain의 전체 count를 range 값으로 '동일하게' 분할하여 분배
const f1 = d3.scalePoint().range([0, 100]).domain([10, 12, 20, 30, 40])
console.log(f1(40))

const f2 = d3.scalePoint().range([0, 100]).domain(['a', 'b', 'c', 'd'])
console.log(f2('c'))

// padding이 붙었을 경우 각 요소의 간격에 padding을 곱하여 양쪽 여백으로 줌
const f3 = d3.scalePoint().range([0, 100]).domain(['a', 'b', 'c', 'd']).padding(0.3)
console.log(f3('d'))

const f4 = d3.scalePoint().range([100, 200]).domain(['a', 'b', 'c', 'd'])
console.log(f4('b'))

6-2. scaleLinear()

  - 비율에 맞게 값을 변경

const f1 = d3.scaleLinear().range([0, 100]).domain([0, 500])
        console.log(f1(250))
        console.log(f1(0))
        console.log(f1(500))
        console.log(f1(100))
        console.log(f1(1000))

        crayons = d3.scaleLinear()
        .domain([-1, 0, 1])
        .range(["orange", "white", "green"])
        console.log(crayons(0.3))

6-3. scaleBand()

  -  숫자가 아니라 키 값으로 할당

const f = d3.scaleBand().domain(["one", "two", "three", "four"]).range([0, 100])
        console.log(f('one'));
        console.log(f('two'));
        console.log(f('three'));

6-4. scaleTime()

  -  시간에 맞게 값을 변경

const f1 = d3.scaleTime().domain([Date.now(), Date.now() + 24 * 60 * 60 * 1000])

 

참조 :

D3.js : https://d3js.org/

D3.js - Data-Driven Documents

공식 Github :  https://github.com/zziuni/d3/wiki

GitHub - zziuni/d3: D3.js API Doc Translated to korean.

한국어 번역 Github : https://github.com/d3/d3/blob/main/API.md

GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML.

API전체 : https://runebook.dev/ko/docs/d3/d3-array

D3.js - d3-array JavaScript의 데이터는 종종 iterable(배열, 집합 또는 생성기 등)로 표현되며 시각화 분

 

D3 강의 : https://www.inflearn.com/course/%EC%A7%80%EA%B8%88%EB%B0%94%EB%A1%9C-d3/dashboard

지금 바로 D3.js 시작하기 : 웹 데이터 시각화 - 인프런 | 강의

블로그 : https://cyberx.tistory.com/211

D3.js를 이용하여 웹차트 만들기1 – 개념 및 예제