D3.js 기초: select()와 enter() 함수 이해하기

[utterances-bot]

D3.js 기초: select()와 enter() 함수 이해하기 | 44BITS

자바스크립트 시각화 라이브러리 D3.js에는 select API가 있습니다. 이 함수는 제이쿼리(jQuery)의 select와도 비슷합니다만, 실제로는 작동 방식이 조금 다릅니다. 이 함수는 시각화할 대상을 선택하는 함수로 D3.js의 모든 시각화가 시작되는 함수라고 할 수 있습니다. 이 글에서는

https://www.44bits.io/ko/post/d3js-basic-understanding-select-and-enter-api

[omnyx2]

좋은 글 감사합니다. 덕분에 selectAll의 역활에 대해서 알게되었습니다. 혹시 실례가 아니라면 selectAll과 Append에 대해서 여쭤보아도 될까요?

[nacyot]

omnyx2 // 질문 남겨두시면, 제가 아는대로 답변 남겨두겠습니다.

[DongJoonLeeDJ]

enter에 대해서 덕분에 개념 잘 정리하고 갑니다. 감사합니다^^ 전 이렇게 정리하고 이해했어요. 이미 있는 내용이지만 적어봅니다.

d3.select("body") // 1 .selectAll("p") // 2 .data(dataset) // 3 .enter() // 4 .append("p") // 5 .text("New paragraph!"); // 6

1. body 태그 선택해서
2. 그 안에 p태그들을 선택
3. dataset을 읽어 와서
4. dataset 길이만큼 객체를 만들되, 2번에서 만든 p태그가 dataset보다 적은 경우 객체 추가 생성
5. 4번에서 추가한 만큼 p태그 추가
6. 이 p태그들에 글자 추가

[yeynii]

지금은 d3가 많이 업데이트되어 내부구현 꽤 달라졌긴 하지만, 그래도 동작 방식은 기본적으로 비슷해서 흐름을 이해하는데에 많은 도움이 됐습니다. 글 잘 읽고 갑니다. 감사합니다.