[D3.js] 제거(remove()) 함수

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] 제거(remove()) 함수

오늘은 제거 함수에 대해서 알아보는 시간을 갖겠습니다. 별다른 내용은 없습니다. 구지 remove()함수를 1일 post에 할애할 정도의 내용을 갖고 있지 않습니다. 간단히 정의를 하더라도 선택한 객체를 제거한다는 의미를 가지고 있는 것일 뿐 특별한 내용은 없습니다. 하지만 remove()함수를 잘 써야 하고 어떤 느낌으로 동작하는지를 꼭 알아두어야 합니다. 이걸 쓰느냐 안쓰느냐에 차이점과 이 함수를 쓰면서 date들이 어떻게 변화를 가는지 알아두면 나중에 데이터 시각화 할 때 도움이 많이 됩니다.

이제 d3.remove()함수에 대해 살펴보도록 하죠.

1. d3.remove() 함수

우선 D3.js의 기본틀로 살펴봅시다. 이렇게 5개의 데이터를 D3.js 기본틀에 대입하면 어떤 결과가 나올까요.

var data =[1,2,3,4,5];
 
var p = d3.select("body").selectAll("p").data(data) //갱신
           .text(function(d){return d;})
    p.enter().append("p")                           //추가
           .text(function(d){return d;})
    p.exit().remove();                              //종료

[결과]

data [1,2,3,4,5]의 값이 HTML문서의 body 태그에서 모든 p태그를 선택하고 p태그가 있으면 data 값으로 갱신하고 p태그가 없거나 부족하면 p태그를 추가하여 5개의 p태그에 순차적으로 5개의 데이터값을 텍스트 형태로 출력합니다. 그리고 나서 exit()종료함수로 종료하고, remove()함수로 body안에 p태그가 5개까지만 남겨두고 나머지는 제거하는 명령입니다.

잘! 의미가 remove()함수가 이해가 안 될 수 있습니다. 다음 실험을 살펴보도록 하죠.

2. d3.remove()의 동작 테스트

다음 예제로 d3.remove()함수가 정확히 어떻게 동작하는지 의미를 이해해 주시기 바랍니다.

<body>
 <script src="https://d3js.org/d3.v5.min.js"></script>
 
 <script> 
  var data =[1,2,3,4,5];
 
  function render(data){
    var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})
      p.enter().append("p")
           .text(function(d){return d;})
      p.exit().remove();
  }
 
  render(data);
 
  setTimeout(function(){render([1,2,3]);},1000);
  setTimeout(function(){render([4,5]);},2000);
  setTimeout(function(){render([6,7,8,9,10]);},3000);
  setTimeout(function(){clear();},5000);

  function clear(){
    var p = d3.select("body").selectAll("p").remove();
  }  
 </script> 
</body>

위 소스를 자세히 보시기 바랍니다. setTimeout()함수를 사용했는데 이 함수의 동작은 다음과 같습니다.

setTimeout(호출함수,1000) : 현재 페이지가 열리고 난 후 1초 후 호출함수가 호출이 됨.

위 소스에서는 4개의 setTimeout()함수가 사용되었는데 1,2,3초로 나눠졌는데 1초후에 첫번째 render()함수가 수행되고 2초후에 두번째 render()함수가 호출됩니다. 여기서 2초는 1초가 지난 후 다시 리셋되어 2초가 아니라 위에 코딩된 4개의 setTimeout()함수가 같이 시간이 흘러갑니다. 그렇기 때문에 주의하셔서 코딩 해야 합니다. 1,2,3초는 각각 1초 단위로 render()함수가 수행되고 5초는 페이지가 열린후 5초후에 clear()함수가 호출된다는 점이죠.
setTimeout()은 페이지가 열린 후 동시에 타이머가 돈다고 생각하세요. 실행 결과를 보시면 이해가 빠를 거에요.

[결과]

위 결과를 보시면 setTimeout()의 호출시간이 어떻게 흘러가시는지 아시겠지요.

오늘은 이 함수를 다루는게 아니라 remove()함수를 이해하는게 중요합니다.

  render(data); //페이지 열리는자마자 실행
    
  setTimeout(function(){render([1,2,3]);},1000);
  setTimeout(function(){render([4,5]);},2000);
  setTimeout(function(){render([6,7,8,9,10]);},3000);
  setTimeout(function(){clear();},5000);

총 4개의 동작으로 살펴 볼 수 있습니다.

1) setTimeout(function(){render([1,2,3]);},1000)

페이지 열리지마자 render(data)로 한번 수행합니다. 위에서 [1,2,3,4,5]의 데이터를 p태그에 순차적으로 5개 출력합니다.

이 상태에서 1초후 render([1,2,3])함수가 호출되어 수행합니다. 어떻게 될까요.

      var p = d3.select("body").selectAll("p").data([1,2,3]) //갱신
           .text(function(d){return d;})
      p.enter().append("p") //추가
           .text(function(d){return d;})
      p.exit().remove(); //종료

이렇게 [1,2,3]의 data값이 대입되는데 body태그 안에 selectAll("p")태그는 총 5개가 있는데 출력 할 데이터는 3개입니다. 5개의 p태그가 있으니 순차적으로 p태그 3개의 데이터 값을 갱신하게 됩니다. 그리고 남은 2개의 p태그는 더이상 데이터가 없기 때문에 3번째 데이터 값을 갱신한 상태에서 exit()함수로 종료하는데 remove()함수로 나머지는 제거가 됩니다. 즉, 아래와 같이 출력이 되는 것이죠.

이렇게 body안에 3개의 p태그에 새로운 데이터 값으로 갱신 되고 데이터가 더 없으니 나머지 2개의 p태그는 제거가 되었습니다.

2) setTimeout(function(){render([4,5]);},2000)

이 동작도 위에서 설명한 것과 동일합니다. render([4,5])함수가 호출됩니다.

      var p = d3.select("body").selectAll("p").data([4,5]) //갱신
           .text(function(d){return d;})
      p.enter().append("p") //추가
           .text(function(d){return d;})
      p.exit().remove(); //종료

[결과]

보시는 것 같이 3개의 p태그에서 2개의 데이터 값이 갱신되고 나머지 1개의 p태그는 제거 됩니다.

3) setTimeout(function(){render([6,7,8,9,10]);},3000)

여기에서는 이전 동작은 2개의 p태그에 [4,5]값이 출력 되었습니다. 3초가 되면 render([6,7,8,9,10])함수가 수행되는데 다음 동작을 수행합니다.

      var p = d3.select("body").selectAll("p").data([6,7,8,9,10]) //갱신
           .text(function(d){return d;})
      p.enter().append("p") //추가
           .text(function(d){return d;})
      p.exit().remove(); //종료

이동작을 수행하면 우선 [6,7]은 기존 p태그의 값을 갱신 시키고 나머지 [8,9
,10] 데이터는 새로운 p태그가 추가되어 아래와 같이 출력됩니다.

[결과]

4) setTimeout(function(){clear();},5000)

이 clear()함수는 5초 후 호출됩니다.

  function clear(){
    var p = d3.select("body").selectAll("p").remove();
  }

위 코딩을 보면 body태그 안에 모든 p태그를 선택하는데 바로 remove()함수가 붙으면 모두 선택된 상태에서 제거를 하기 때문에 body안에 모든 p태그가 제거가 됩니다.

[결과]

3. remove()함수를 안쓸 경우

만약, exit()함수 끝나버린다면 어떻게 될까요.

  function render(data){
    var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})
      p.enter().append("p")
           .text(function(d){return d;})
      p.exit();
  }
 
  render(data);
  setTimeout(function(){render([1,2,3]);},1000);
  setTimeout(function(){render([4,5]);},2000);
  setTimeout(function(){render([6,7,8,9,10]);},3000);

render(data)은 다음과 같겠죠.

setTimeout(function(){render([1,2,3]);},1000)은 아래서 보시는 것과 변화가 없어 보일꺼에요. 3개의 데이터는 갱신이 되었지만 기존의 [4,5]은 제거되지 않고 겹쳐서 출력됩니다.

setTimeout(function(){render([4,5]);},2000)은 아래와 같이 첫번째 p태그부터 갱신이 되니 결과는 이렇게 나옵니다.

setTimeout(function(){render([6,7,8,9,10]);},3000) 은 모두 갱신이 됩니다.

remove()함수가 있을때와 없을때를 느낌을 아시겠지요.

마무리

오늘은 간단하 remove()함수를 다뤘습니다. 이외에 remove()함수는 위치에 따라서 결과가 변하기 때문에 신중하게 사용하세요. 데이터 시각화를 할 때 데이터를 어떻게 출력하느냐와 실시간으로 데이터를 갱신했을 때에 remove()함수를 사용 할 때 주의하고 사용해 주시면 됩니다. 그리고 사용하지 않을 때 데이터들이 어떻게 변화는지도 아셨으니깐 데이터 시각화를 할 때 remove()함수를 필요한 곳에 적절하게 사용하면 효율적인 데이터 시각화를 할 수 있겠죠.