D3 Data JOIN D3가 Data Driven Document 라는것을 보아도 Data를 다루는 방법이 매우 중요합니다. 이번에는 Data JOIN 데해서 알아보겠습니다. Data Join D3 에서 사용하는 데이터는 JSON 을 기본으로 이용합니다. 텍스트별 색상 지정하기. 텍스트와 색상을 가진 JSON 객체가 있고, 이들 텍스트를 출력하는 예제입니다. 위 예제를 살펴보면, div.container 내부에 p 엘리먼트가 5개가 있습니다. 그리고 textData 는 6개의 Object 를 가지고 있습니다. text 를 출력하고, 각 텍스트에 색상을 지정하고 있습니다. 결과보기 결과화면과 같이 우리가 지정한 5개의 엘리먼트에만 텍스트가 출력하고, 마지막 End. 는 출력되지 않습니다. 이유는 셀렉션을..
D3 에서 DOM 알아보기. 지난번 연재 내용에서 D3 에서 DOM 셀렉션을 알아보았습니다. 돔을 선택한 후 DOM 에 신규 엘리먼트를 추가하거나, 속성값을 추가하거나, css 스타일도 먹일 수 있습니다. DOM 관리 기능 element 삽입, 제거 엘리먼트에 attribute 추가 엘리먼트 프로퍼티 추가하기 css styling 하기 html 코드 삽입 위와 같이 DOM 에 접근하고, DOM 을 관리할 수 있습니다. 이제부터 D3가 가진 DOM 기능들을 알아보고 어떻게 운용할 수 있는지 살펴보도록 하겠습니다. DOM Manipulating Sample append() 를 이용하여 엘리먼트 추가하기 selection.append(name) append 는 셀렉팅된 엘리먼트 마지막에 신규 엘리먼트를 추가합..
D3 (Data Driven Document) D3는 Data Driven Document의 의미로 D가 3개 들어있다고 하여 D3라고 합니다. D3 특징 D3는 다음과 같은 특징이 있습니다. Custom Interactive data visualization 가능 SVG 이용 (Scalable Vector Graphics) 으로 벡터그래픽을 지원합니다. (즉, 확대/축소에 화면이 깨지지 않습니다.) HTML 과 CSS 를 지원하여 디자인 할 수 있습니다. D3 Install D3를 이용하기 위해서는 다음 몇가지 요소가 필요합니다. D3 library D3룰 이용하기 위해서 다음 링크를 header 에 추가해 줍니다. 혹은 실제 소스 코드를 로컬에 설치하고자 한다면 다음 zip 파일을 다운받아 압축을 풀..
- Total
- Today
- Yesterday
- Database
- CD
- go
- Golang
- java
- tfsec
- jenkins
- deploy
- Gorilla
- NodeSelector
- gitops
- MongoDB
- declative
- Kafka
- argocd
- docker-compose
- jpa
- mongo
- D3
- kafka-springboot
- MySQL
- kubernetes
- CI
- docker
- Spring
- AWS
- springboot
- Terraform
- mapping
- kubectl
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |