[d3.js] 그래프 여러번 그릴 때 두번째 그래프가 보이지 않는 경우

여러 데이터들을 선택적으로 그려야 할 때(특히 체크박스가 있는 경우), 그래프 그리는 함수를 여러번 반복하는게 효과적일 수 있습니다. 그런데 그래프의 요소들을 선택하고 여러번 그리면 맨 처음으로 들어간 data에 대해서만 그림이 그려집니다.

즉. data1으로 scatter plot을 그린 뒤에 data2로 다시 scatter plot을 그리면 data1으로부터 그려진 plot만 있다는 뜻이죠.

이유는 코드 속에 숨어있었다... 

 svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)

예제(http://bl.ocks.org/mbostock/3887118)에 나온대로 위의 코드는 circle 요소를 data에 맞게 만들어준다. 그런데 이걸 여러번 반복하면서 data(data_n)와 같이 data를 넣어주면 문제가 생긴다. 그러니까... 안그려준다. 그래서 구글신께 아뢰니 아래의 답을 주셨다.

(http://stackoverflow.com/questions/26459963/nodes-not-appearing-for-second-line-in-d3-js)

이유인 즉슨, 이미 selectAll()로 선택된 애들에 data가 들어가있어서 data() 메서드를 불러봐야 소용이 없다는 것이다. 자세한건 위의 링크를 타고 가보시길... (영어로 써져있지만 결국 이 내용이다.) 그래서 아래와 같이 하면 잘 된단다.

 svg.selectAll(".dot.second")
     .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 3.5)

만약 for문으로 돌려가면서 여러번 만들어야 한다면 아래처럼 만들어도 잘 된다. 물론 css class는 dot 하나만 필요하다. 

 svg.selectAll(".dot_"+cnt)
     .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 3.5)