[D3.js] Data 실시간 처리
[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>
[결과]
1 2 3 4 5
위와같이 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>
위 소스는 0.1초 단위로 갱신이 되는데 결과 영상을 짧게 보기 위해서 갱신 시간으로 아주 짧게 만들었네요. 결과는 아래 움짤로 재편집 했습니다.
[결과]
처음 데이터 1,2,3,4,5값이 p태그에 text()함수를 통해 출력이 됩니다. 그다음 새로운 데이터 값 3개가 들어오고 기존에 5개의 p태그에서 3개의 p태그 값이 갱신되어 집니다. 여기서 나머지 2개의 값은 remove()함수를 통해 제거가 됩니다.
참고로, k변수를 새로 만들어서 k++로 표현하였는데 k값은 실시간으로 갱신되는 데이터 값을 보기 위한 표현으로 의미를 둘 필요는 없는 변수입니다. 결과를 실시간 갱신이 이루어지는지 보기 위해서 표현한 부분입니다.
마무리
위 setTimeout()함수외에도 다른 표현 방법으로 타이머함수도 있으며 몇가지 다르게 표현하는 방법들이 있었는데 간단히 실시간 데이터 갱신을 하게 된다면 이런 느낌으로 코딩을 하고 그 결과를 간단히 보기 위한 표현으로 보시면 되겠습니다.
'D3.js > D3.js' 카테고리의 다른 글
| [D3.js] 애니메이션 효과 (0) | 2019.10.21 |
|---|---|
| [D3.js] 막대형 차트로 보는 D3.js (0) | 2019.10.18 |
| D3.js 기본 틀 (0) | 2019.10.16 |
| D3.js 버전5로 공부 시작 (0) | 2019.10.15 |
| 시각화 문서 D3.js를 도전해보자 (0) | 2019.10.14 |
