[D3.js] setInterval() 함수로 실시간 처리

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

[D3.js] setInterval() 함수로 실시간 처리

참조 :
[D3.js] Data 실시간 처리
[D3.js] Timer 함수

지난 시간에 두가지 방법으로 데이터를 실시간 처리를 하였습니다. setTimeout()함수를 이용하여 순환 호출방식으로 반복 동작을 하거나 d3.timer()함수로 반복 동작을 수행했었습니다. 오늘은 setInterval() 함수로 반복 동작하여 데이터를 실시간 처리를 해보는 실험을 하도록 하겠습니다.

1. setInterval() 함수

setInterval(호출함수, 호출시간) : 호출시간을 기준으로 호출함수를 호출하게 됨

함수가 무지 간단하죠. 간단한 예제로 동작을 살펴보도록 하죠.

예제)

<body>
<div id="output"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
 
var time_val=0;

function update(){ 
  time_val++;
  var p = d3.select("#output").text(time_val);
}
 
setInterval(update,1000);
 
</script>
</body>

setInterval(update,1000)함수로 1초 간격으로 update()함수가 호출되게 됩니다.

update()함수 내부 코딩을 볼까요.

function update(){ 
  time_val++;
  var div = d3.select("#output").text(time_val);
}

time_val값이 1씩 증가하는데 그 time_val값이 어디에 출력 되네요. html div 태그의 id가 "output"인 태그에 선택하게 되고 그곳에 text(time_val)함수로 time_val값을 출력하게 됩니다.

이 동작을 1초 단위로 반복하게 됩니다.

[결과]

결과를 보시면 1씩 카운트한 결과를 계속 갱신을 하고 있지요.

여기서, 단순하게 끝내면 아쉬우니깐 지난 시간에 캔버스에 데이터 파일을 읽어와서 원 이미지로 시각화 했는데 그거 응용하여 시험을 이여가도록 하죠.

2. 랜덤 데이터로 setInterval() 실시간 시각화 예제

1) 캔버스 설정

    //배경
    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");

2) 스케일 설정

반지름과 Color를 스케일로 지정합니다.

    var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);
    var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);

3) 데이터를 Circle(원)로 출력

    //데이터 출력
    function render(dataset){
      var circle = svg.selectAll("circle").data(dataset) //갱신
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",function(d){return rScale(d.r);})
             .attr("fill",function(d){return ColorScale(d.r);})
          .enter().append("circle") //추가
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",function(d){return rScale(d.r);})
             .attr("fill",function(d){return ColorScale(d.r);})
          .exit().remove();  //종료
    }

원 데이터 값을 시각화하는데 원의 반지름과 Color는 스케일로 캔버스 영역에 맞췄습니다.

4) 랜덤 데이터 만들기

외부 데이터를 실시간으로 읽어와야 하는데 마땅한 데이터가 없어서 지난 시간에 시험한 프로그램 코드를 그대로 인용하기 위해서 랜덤 함수로 데이터를 만들었습니다.

   function update(){
 
      var data=[];
 
      for(var i=0;i<5;i++){ 
        var x = Number(Math.floor(Math.random() * 500)+1);
        var y = Number(Math.floor(Math.random() * 500)+1);
        var r = Number(Math.floor(Math.random() * 10)+1);
        data.push({x: x, y:y,r:r});        
      }
      render(data); //데이터 출력  
    }

캔버스 500x500 사이즈라서 x,y 꼭지점을 캔버스 영역 안으로 들어가게 제한을 두었습니다. 테뒤 경계선에서 약간 원 이미지가 넘어가긴 하는데 그냥 무시했네요.

update()함수가 호추 될때 마다 5개의 데이터가 랜덤으로 만들어지고 render()함수로 데이터를 시각화 하게 됩니다.

5) 1초 간격으로 실시간 호출

setInterval(update,1000);

1초 간격으로 update()함수를 호출하게 됩니다.

6) 종합소스

<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
  <script>
    var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);
    var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);
 
    //배경
    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");
 
    //데이터 출력
    function render(dataset){
      var circle = svg.selectAll("circle").data(dataset)
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",function(d){return rScale(d.r);})
             .attr("fill",function(d){return ColorScale(d.r);})
          .enter().append("circle")
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",function(d){return rScale(d.r);})
             .attr("fill",function(d){return ColorScale(d.r);})
          .exit().remove();
  
    }
 
    function update(){
 
      var data=[];
 
      for(var i=0;i<5;i++){
 
        var x = Number(Math.floor(Math.random() * 500)+1);
        var y = Number(Math.floor(Math.random() * 500)+1);
        var r = Number(Math.floor(Math.random() * 10)+1);
        data.push({x: x, y:y,r:r});
        
      }
      render(data);
      console.log(data);
    }
 
   setInterval(update,1000);
  </script>
</body>

[결과]
그냥 텍스트 숫자 카운트 출력보다 아래와 같이 이미지 출력이 좀 더 그럴싸 하죠.