D3 EventListener

D3는 DOM을 조작함에 있어 이벤트 리스너를 추가 혹은 제거할수 있는 기능도 있습니다.

selection.on()

selection.on([이벤트 타입],callback)
이 함수를 이용해서 selection 안에 있는 node들에 이벤트 리스너를 추가 할 수 있습니다. callback 함수에 이벤트 콜백 함수를 넣으면 됩니다.

또한 callback 부분에 null을 넣으면 가장 최신의 이벤트 콜백함수로 항상 대체되기 때문에 해당 이벤트 리스너가 제거되는 기능이 됩니다.

d3.event

d3.event 안에는 이벤트로서 기대할 수 있는 모든 기능이 다들어 있습니다.
특히 d3.event.preventDefault() 를 사용함으로서 이벤트 전파를 막을 수 있습니다.

selection.append()

selection.append([tagName])
이 함수는 선택된 selection 안의 node 에 들어있는 것안에 tagName 을 생성하고 해당 태그가 포함된 selection을 반환합니다.

selection.property()

selection.property([attributeName], newValue)
selection 안의 속성 이름을 인수로 넣으면 거기에 해당하는 프로퍼티값을 반환합니다.
두번째 인수를 넣게 되면 해당 프로퍼티값을 두번째 인수값으로 지정할 수 있습니다.

그렇다면 이게 selection.attr()과 무엇 다르냐 라고 물어볼수 있습니다.
다릅니다. attr은 tag에 대한 속성값을 변경시키고 이는 DOM Element의 property와 동기화 됩니다. 하지만 동기화 되지 않는 속성들이 있는데 대표적으로 input tag의 value 값입니다. 이는 attr 로 속성값을 변경시켜도 DOM Element의 property 값과 동기화 되지 않아 selection.property로 변경시켜줘야 합니다.

selection.remove()

selection.remove()
selection에 들어있는 모든 node들을 지워버립니다.