d3 : d3 기본 개념

기본구조

6가지 개념

- selector

-data & joins(enter, update, exit)

https://lumiamitie.github.io/d3/d3-enter-update-exit/

1. // DOM elements < data elements (enter)

2. // DOM elements > data elements (exit)

3. // DOM elements = data elements (update)

1.enter()을 집어넣어서.,..새로운 문서(dom)요소를 추가로 넣으면....해결하면됨

2.exit()을 넣어서.........문서(dom)요소를 살리면 됨

-scales

 : 백분율, 어떤 범위의 숫자를 다른 범위의 숫자로 변경해주는 함수

  https://www.bsidesoft.com/?p=2382

-axis

:scale을 이용한다.

-shapes

-layouts

============================================================

d3 용어들

*transform translate

.attr("transform", "translate(100,100)") //x축 y축을이용하여 위치를 지정하는 듯 싶다

*clip path

이 부분이 새로 생긴 부분인데, clip-path에 대한 설정을 해주는 것입니다.

clip-path란 요소가 표현되는 공간을 지정해주는 것입니다.

위의 코드에서도 넓이과 높이만큼 공간을 지정해주어 외부로 그래프가 삐져나가지 않게 한 것 같습니다.

clip-path에 대한 부분의 id를 clip으로 지정해주었네요.