dc.js x 축을 따라 움직이는 애니메이션 선택

Question

선택 항목을 따라 슬라이드하는 dc.js 차트를 원합니다. 나스닥 예제 https://dc-js.github.io/dc.js/에서 시간의 하위 선택을 선택한 다음 "애니메이션"버튼을 클릭하면 선택 필터가 사전 결정된 단계 크기로 x 축을 따라 슬라이드합니다.

어디서부터 시작 해야할지 모르겠지만 ... 아이디어가있는 사람이 있습니까?

Answer 1

대부분의 작업은 사용자 상호 작용을 기반으로하지 않고 타이머를 기반으로 관련 차트에 현재 필터를 설정하는 것입니다.

나는 이것을 설명하기 위해 바이올린으로 나스닥 예제의 관련 부분을 복사 한 : 차트가 자리에되면, 애니메이션이 setInterval에 따라 필터를 변경의 문제이다 https://jsfiddle.net/0zkbyyqu/9/

. 모호한 이유로, 우리는 moveChart의 focus 방법이 아닌 filter 방법을 사용하기를 원하지만 본질적으로 범위 차트의 변화 반영하기 위해 좀 더 코드로, 같은 일을하고 있어요 : (

var beginYear = 1985; 
window.setInterval(function() { 
    moveChart.focus([ 
    new Date(beginYear, 0,0,0,0,0,0), 
    new Date(beginYear+3, 0,0,0,0,0,0)]); 
    if(++beginYear > 2009) 
    beginYear = 1985; 
}, 1000); 

을 Initial Range selection in DC.js chart가)

나는 사용자로부터 오는 범위의 초기 선택에 대한 아이디어를 중단 한 단지로 사라 : 당신이 filter 방법을 사용한다면 여기에 설명 된대로, 당신은 dc.filters.RangedFilter를 구성해야 할 것 3 년의 범위. 이 예제는로드되는 즉시 애니 메이팅을 시작합니다. chart.filter()을 사용하여 현재 필터를 가져올 수 있습니다. 결과는 RangedFilter가됩니다. RangedFilter는 두 개의 날짜 배열입니다. 원하면 애니메이션에 시작/멈춤 버튼을 추가하는 방법이 명확하다.

는 몇 가지가이 방법에 대한 까다로운 있습니다

1. 그것은 당신이 또한 타이머 또는 스트리밍 데이터가있을 때 전환과 차트를 사용하여 까다로운. 이 경우 어떤 의미로도 transitionDuration을 500ms로 줄여야했지만 원인과 결과는 여전히 약간 혼란 스럽습니다. 이것에 대해 무엇을해야할지 모르겠습니다.

2. 영역 차트 transitions are incorrect 그래서 이상한 유물이 나옵니다.