D3에 원이있는 전환

Question

전환으로 D3 원 애니메이션을 설정했습니다. 초기 데이터 포인트로 최소 날짜를 사용하고 전환의 최종 데이터 포인트로 최대 날짜를 사용하고 있습니다. 내 질문은 다음과 같습니다.

매우 큰 데이터 세트를 사용하고 있습니다. 전환을 최소에서 최대로 지정하기 때문에 둘 사이의 다른 모든 점을 놓칠 수 있습니다. 예를 들어 중간에 원 A에 미친 점프가 있다면? 테스트를 마쳤을 때 마치 점프를 건너 뛰었던 것처럼 보였습니다.

그 사이의 모든 지점에 대한 계정 전환을 설정하는 더 좋은 방법이 있습니까?

Answer 1

오브젝트가 최소에서 최대로 변환하도록 지시하면 두 값만 존중하며, 말한대로 그 사이의 재미있는 점프는 건너 뜁니다.

현재 모든 데이터를 입력하여 차트를 한 번 그렸을 것입니다. 대신 당신이 단계에서 차트 단계에 데이터를 밀어 수 :

var data = [{id: o1, v: []}, {id: o2, v: []}]; // values for 2 objects 

function getTransform(d) { 
    return "translate(" + d.v[d.v.length-1] + ")"; 
} 

function update() { 
    var elems = d3.selectAll(...).data(data, function(d) {return d.id;}) 
    elems.enter() 
     .append(...) //append DOM/SVG objects and 
     .attr(...) //initalize their start values and 
     .attr("transform", getTransform) //their start animation values 

    // animate the existing elements to move to their new values 
    elems.transition().attr("transform", getTransform) 
} 

function play(){ 
    // pushing in "crazy" values 
    data[0].v.push(Math.random()*10); 
    data[1].v.push(Math.random()*10); 
    update(); 
} 

setTimeout(play, 500) 
setTimeout(play, 1000) 
setTimeout(play, 1500) 

기본적인 아이디어는 한 번에 D3에 모든 데이터를 던져,하지만 당신은이 애니메이션하고자하는 순서와 적시에 데이터를 추가하지 않는 것입니다 .

또한 시간 인덱스를 설정하고 getTransform 함수에서 사용하여 원하는 모든 상태로 애니메이션을 적용 할 수 있습니다. 이 단계를 단계별로 수행하면 애니메이션에 "미친"값이 사용됩니다. 당신은 애니메이션을 만들기 원하는 애니메이션 duration(..) 속도로 시간 초과 값 500 일치해야

var time = 0; 
var maxTime = 2; 

function getTransform(d) { 
    return "translate(" + d.v[time] + ")"; 
} 

function next(){ 
    update(); 
    if(time++ < maxTime) setTimeout(next, 500) 
} 

play(); play(); play(); // add some data ;) 
next() // start index based playback from `time` to `maxTime` 

은 미친 스파이크를 기록했다. 그렇지 않으면 d3이 애니메이션 경로를 부드럽게 만듭니다 (애니메이션보다 빠르게 업데이트하는 경우).