D3로 "실시간"그래프 생성
나는 최근에 D3.js 프레임 워크를 사용하는 방법을 배우기 시작했고, 내가 원하는 것을 정확히 수행하도록 설계된 것처럼 보이지만 "실시간"업데이트 그래프의 간단한 예를 찾을 수 없습니다.
새 데이터를 사용할 수있게되면 업데이트되는 꺾은 선형 차트와 같은 것을 찾고 있습니다. 새 데이터는 "마지막으로 본"타임 스탬프 또는 다른 AJAX-y 메서드가있는 json URL을 쳐서 얻을 수 있습니다.
편집 : 답변의 D3 부분은 다음과 같습니다.
http://bost.ocks.org/mike/path/
이제 사람들은 서버에서 클라이언트로 새 데이터를 가져 오는 것을 어떻게 권장합니까?
이 튜토리얼은 실시간 선 그래프를 만드는 데 많은 도움이 될 수 있습니다 : http://bost.ocks.org/mike/path/
몇 가지 의견을 더 추가하고 싶습니다.
비동기 데이터
실시간 그래프를 수행 할 때 종종 데이터를 비동기 적으로 가져 오므로 각 "포인트"간의 정확한 시간을 알 수 없습니다.
- 라인의
line경우 튜토리얼에 설명 된 내용이 신경 쓰지 않기 때문에 운 이 좋습니다. - 지속 시간이 부드러운 전환 효과를 가지려면 더 까다 롭습니다. 핵심은 마지막 프레임과 이전 프레임 사이의 시간이되도록 기간을 설정하는 것입니다. 이것은 네트워크가 거의 항상 동일한 처리량을 갖기 때문에 다음 항목에 대한 좋은 근사치입니다.
Y 축
기존의 선 그래프에서는 y 영역을 쉽게 결정할 수 있습니다. 그러나 라이브 데이터의 경우 y 값이 종종 한계를 벗어날 수 있습니다. 이것이 제가 반복 할 때마다 y 도메인을 설정하는 함수를 호출하는 것이 좋습니다. 경계 상자를 만들 수도 있습니다.
공연
데이터가 항상 추가되므로 더 이상 사용하지 않는 값을 삭제해야한다는 사실에 매우주의를 기울이고 싶을 수 있습니다. 그렇지 않으면 데이터가 계속 무거워지고 전체 애니메이션이 충돌 할 수 있습니다.
이 플러그인도 흥미로울 수 있습니다 : Cubism .
Cubism.js 는 시계열 시각화를위한 D3 플러그인입니다. Cubism을 사용하여 더 나은 실시간 대시 보드를 구성하고 Graphite, Cube 및 기타 소스에서 데이터를 가져옵니다. Cubism은 GitHub의 Apache 라이선스에 따라 사용할 수 있습니다.
편집하다:
다른 중요한 프로젝트는 D3를 활용하는 Rickshaw 일 수 있습니다 .
대화 형 실시간 그래프를 만들기위한 JavaScript 툴킷
이 예제 참조 : 미래의 랜덤 데이터
다음은 두 가지 예입니다.
- 클라이언트 가 일정한 간격으로 서버에서 새 데이터를 가져 오도록 할 수 있습니다 (예 : 일부 AJAX 호출 사용).
- 브라우저가 지원하는 경우 서버를 향한 웹 소켓을 열어 서버가 새 데이터를 사용할 수있는 즉시 직접 푸시 할 수 있습니다.
둘 중 하나를 선택하는 것은 예상되는 연결 수, 데이터 업데이트 속도, 지원할 브라우저 등 다양한 변수에 따라 달라집니다.
어쨌든 d3.js 라이브러리는 데이터 를 얻는 방법이 아니라 데이터 를 표시 하는 방법에 관여 합니다.
참고 URL : https://stackoverflow.com/questions/12764813/producing-a-live-graph-with-d3
'Program Tip' 카테고리의 다른 글
| Perl에서 shift ()는 무엇을합니까? (0) | 2020.11.15 |
|---|---|
| IntelliJ IDEA 용 Visual Studio ReSharper 키맵 (0) | 2020.11.15 |
| Jasmine과 함께 작동하도록 requirejs 얻기 (0) | 2020.11.15 |
| 배열의 경우 push () 또는 pop ()과 동일합니까? (0) | 2020.11.15 |
| .Wait () 대 .GetAwaiter (). GetResult ()의 차이점은 무엇입니까? (0) | 2020.11.15 |