D3를 이용하는 목적은 여러가지가 있겠지만 아무래도 interactive 한 시각화가 요구 될 때 시각화 도구로 D3를 많이들 사용하게 된다. 특히 특정 버튼을 눌렀을 때 내부의 데이터가 바뀌면서 화면도 시시각각 바뀌는 것이 그 대표적인 예라고 할 수 있다. 이 때, 이러한 조작을 가능하게 해주는 것이 D3의 enter, update, exit 개념이다. 이 개념은 D3의 핵심 개념으로 화려하고 다양한 D3의 여러가지 기능을 쫓다보면 놓치기 쉽다. 나 역시 이 개념을 간과하고 신나게 코딩하다가 D3정말 D3답지 않게 코딩했다가 코드를 전면 수정한 적이 있다. 혹여 D3를 시작하는 사람이라면 이 개념을 꼭 짚고 넘어가는 것이 좋다. 이 개념에 대한 설명은 다양한 웹문서에 잘 나와 있으니 참고하길 바란다.
어쨌든, 이 개념을 이용해서 코딩을 하려고 하는데 간혹 'exit is not a function' 이라는 에러 메세지를 마주 하게 되었다. 아래 코드는 이런 에러메세지를 발생 시키는 코드 예제이다.
이 코드가 포함된 동적 시각화를 웹 페이지에서 조작해보면 exit() 함수 부분에서 에러가 난다. Stackoverflow를 찾아보니 enter()에 바로 이어서 append로 어떤 객체를 붙이면, barElements는 enter() 로 subselection된 노드가 되고 이 노드들은 정의에 따라 exit() 함수를 가질 수 없다고 한다. (http://stackoverflow.com/questions/27596908/d3-typeerror-link-exit-is-not-a-function-link-exit-remove-what-am-i-doing)
코드를 고쳐서 바로 작성하면 다음과 같다.
올바른 코드는 enter()와 append()를 data()함수에 계속 이어서 하지 말고 위의 코드에서 처럼 한 번 끊어서 해주는 것이다. 이렇게 해주면 전체 data-bound selection을 먼저 한 후 sub-selection에 대해 작업을 하게 되는 코드가 된다고 한다. 솔직히 원리는 완벽하게 이해가 되지는 않지만 코드 상으로 뚜렷한 차이가 보이기 때문에 다음부터는 확실히 구분지어 해야겠다는 생각이 든다. 여튼 알면 알수록 신기하고 헷갈리기도 하는 D3의 enter, update, exit 개념이다.