[D3.js] Data 실시간 처리

시각화 데이터를 웹페이지에 열때 기본적으로 처음 한번만 해당 데이터를 읽어와 화면에 챠트와 같은 이미지로 출력을 하게 됩니다. 한번만 html문서로 출력을 한다면 뭔가 부족해 보일 수 있습니다. 대개 html 문서 상의 데이터들은 실시간 데이터를 다루는 경우가 많습니다. D3.js에서 이러한 데이터를 실시간 처리를 하는 코딩이 필요합니다. 그래서 오늘의 내용은 D3.js 상의 데이터를 일정시간 시간단위로 데이터를 갱신하는 실험을 해보겠습니다.

1. 기본 소스

지난 시간의 p태그에 data 값을 출력하는 예제를 통해 실시간 처리를 해보도록 하죠.

<body>
  <p>1</p>
  <p>1/p>
  <p>1</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
    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();
</script> 
  
</body>

[결과]

위와같이 html 문서가 열릴 때 처음 한번만 data 값들을 순차적으로 p태그에 출력하게 됩니다. 여기서 html 상의 데이터들이 출력한 상태에서 일정 시간 단위로 새로운 데이터로 갱신 시키는 코딩을 간단히 표현해 보겠습니다.

2. setTimeout() 함수를 통한 갱신

setTimeout(function(){호출함수(data);},1000);

다른 방법도 있지만 간단히 의미 전달로 setTimeout 함수를 사용해 보고자 합니다. setTimeout함수는 호출함수를 1초(1000) 후 호출하게 됩니다. 즉, 호출함수에 인자값을 새로운 data로 하여 호출함수를 수행하게 하면 일정 시간단위로 데이터 갱신 할 수 있게 됩니다.

위 기본소스를 간단히 수정해 볼까요.

기본 text()출력을 수행하는데 전체 코딩 부분을 render()함수로 묶어서 처리하도록 하겠습니다.

var data = [1,2,3,4,5];
function render(data){
  출력문;
  setTimeout(function(){render([k,12,13]);},1000);   
}

render함수가 1초(1000) 단위로 호출되게 됩니다. 동작은 render함수가 호출되면 내부동작을 수행하고 마지막 SetTimeout 함수를 통해 다시 render함수가 새로운 data값으로 재호출 됩니다. 재호출 되는 시간을 1초로 하였는데 이 표현을 통해 반복 수행을 하게 되면 1초 단위로 호출되어 데이터 값이 갱신을 하게 되더군요. 정확한 표현은 아니고 생각나는데로 표현한 것입니다.

[소스]

<body>

<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
    var data=[1,2,3,4,5];
    var k = 1;
    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();
      k++;
      setTimeout(function(){render([k,12,13]);},100);      
  } 
  render(data);   
   
</script>
</body>