D3.js 기본 구조

advanced/시각화

D3.js 기본 구조

NoelBird 2019. 8. 8. 11:04

<body>

<script>

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];



// Add your code below this line

d3.select("body").selectAll("h2")

.data(dataset)

.enter()

.append("li")

.text("New Title");







// Add your code above this line

</script>

</body>

d3.js의 기본 구조는 위의 구조와 같습니다.

선택

element를 선택할 때는 d3.select()를 할 수 있고, element 전부를 선택할 때는 d3.selectAll() 메소드를 호출할 수 있습니다.

중첩적으로 select문을 호출 할 수 있습니다.

.data()

data 메소드는 데이터셋을 DOM 트리에 주입시키기 위해서, 데이터셋을 선택하기 위한 메소드입니다.

.enter()

enter 메소드는 데이터셋의 개수에 맞게 새로운 element를 생성해 주는 함수입니다. 그리고 그 새로운 element의 하위에 append 등을 함으로써 데이터 처리를 할 수 있습니다.