d3.js 시간 축을 빠르게 이동하고 최소한의 다시 그리기가 가능합니까?

Question

경로 전환에 대한 Mike Bostock의 D3.js 예제 중 하나는 X 축을 따라 시간이 표시된 차트와 축을 따라 왼쪽으로 데이터가 나타나고 이동하는 것을 보여줍니다 (Windows에서는 작업 관리자와 같은 "모니터"디스플레이와 같음). 저도 똑같은 일을하려고합니다. 시간이 부드럽게 왼쪽으로 움직이는 것입니다. 그러나 4 개의 그래프 (모두 같은 시간 규모).

문제 : 마이크는 각 틱에서 시간 축 생성기를 다시 호출합니다. 이 시점에서 그래프 그리기에서 가장 비싼 부분인데, 소비 된 시간의 약 90 %입니다. 누구나 스크롤을하는 방법을 매번 다시 그릴 필요가없는 다른 방법으로 남겨 두는 아이디어가 있습니까? 나는 축을 미리 만들려고 생각했다가 패닝과 클리핑을 사용하여 관련 부분만을 보여 주려고했지만 다른 사람이 더 나은 (즉 더 빠른) 해법을 가졌는지, 어디 선가 예를 알고 있는지 알고 싶었다.

감사합니다, 데이브 당신이 설명하는 것을 정확하게 할 수 있도록 설계 보인다 Cubism라는 D3 플러그인 프레임 워크가있다

Answer 1

. 그리고 D3을 기반으로하므로 사물을 사용자 정의 할 수 있습니다.

그러나 D3에서이 작업을 직접 수행하려는 경우 HTML5 캔버스를 사용하여 기존 시각화를 다시 렌더링하지 않고 왼쪽으로 이동하는 방법을 사용하는 방식을 확인하는 것이 좋습니다. :

https://github.com/square/cubism/blob/master/src/horizon.js