v5 를 기준으로 작성된 게시글 입니다. d3js 는 버전별로 메서드 호출방식이 다른 경우가 종종 있습니다.
Attributes & Styles
d3 로 선택한 DOM의 attribute와 style 또한 d3를 통해 설정해 줄 수 있다.
다음은 body 태그 안의 svg 란 태그안에 class='sample' 인 DOM 을 선택하고, attribute display='inline', style fill='black' 으로 조작하는 과정이다.
const someGroup = d3.select('body').select('svg').select('.sample')
someGroup.attr('display','inline').style('fill',(d3obj)=>{
if(d3obj.color==='black'){
return 'black'
} else {
return 'blue'
}
})attr이나 style 메서드의 두번째 파라미터로 들어가는 콜백함수의 파라미터는, 우리가 해당 객체와 바인딩 해준 데이터이다. 예를 들어 {"color": "black"} 이라는 데이터를 someGroup 이라는 DOM 과 바인딩 시켰다면, 위 코드의 결과로 someGroup 에 해당하는 DOM의 fill 은 black 이 된다.
Event Listener
d3 로 선택한 DOM 에 이벤트 리스너를 달아줄 수 있다.
// 클릭 이벤트 리스너 추가
someGroup.on('click',()=>{console.log('DOM clicked!')})
arXiv