D3 라인 경로 업데이트 애니메이션이 부드럽 지 않음

Question

사용자 입력을 업데이트하려고하는 영역, 선 및 원으로 구성된 그래프가 있습니다.이 그래프는 이미 작동했지만, 더 낮은 데이터 양에서 예를 들어, [4,2,3,4,5]에서 [2,4,3,1,5,8,6]까지 더 많은 양의 선은 현재 경로를 새 위치로 움직이게되지만 옵셋은 제자리에 고정되고 경로에 추가 된 새 값에 대한 애니메이션은 없습니다.

현재 행 경로에서 새로운 행 경로로 부드러운 전환으로 애니메이션을 적용하면 데이터 값에 관계없이 새로운 값이 제자리에 고정됩니다.

또한 사이드 노트에서 업데이트시 그래프의 너비가 계속 변경되므로 얼마나 많은 데이터가 있더라도 svg의 전체 너비까지 늘리 길 원합니다. 그걸 어떻게 얻을 수 있습니까?

여기까지 내가 가지고있는 것의 피이드입니다. http://jsfiddle.net/znmBy/.

나는 충분히 명확했으면 좋겠다. 나는 D3을 처음 사용하기 때문에 용어에 대해 조금 확신하지 못했다.

Answer 1

D3에서 먼저 고정 위치에 개체를 추가 한 다음 원본에서 다른 위치로 애니메이션을 적용 할 수 있으므로 문제는 다소 복잡합니다.

예를 들어, 이전 값을 기준으로 새 (중간) 초기 위치를 계산 한 다음 실제 최종 값으로 차트를 다시 업데이트합니다. 이것은 최종 위치로 처음부터 좋은 경로 애니메이션을 만들 것입니다 :

updateGraph([ 
      [...].concat(computeLatestIntermediates()), 
      [...].concat(getLatestTimes()) 
      ]); 

    updateGraph([ 
      [...].concat(getRealValues()), 
      [...].concat(getLatestTimes()) 
      ]); 

는 다른 방법이 0에 초기 값을 설정할 수 있습니다. 이 목표 값에 바닥에서 멋진 애니메이션을 만들 것입니다 :

updateGraph([ 
      [..., 0, 0, 0, 0], 
      [...,10,12,13,14] 
      ]); 

    updateGraph([ 
      [..., 234, 245, 210, 170], 
      [..., 10, 12, 13, 14] 
      ]); 

는 Btw는 : 라인 차트 애니메이션을 할 때 당신은 일반적으로 여러 가지 다른 문제가 있습니다. 그들 중 일부는 마이크 path animation page에 적용됩니다. 관련 질문이 있습니다 here.

편집 (스마트 솔루션) :

대신에 두 번 업데이트 함수를 호출, 당신이 구현할 수있는이 같은 그리기 함수 내에서 두 단계를 그리기 :

function getPathData(d,i)  { return "M 0,0 ... L n,n"; } 
function getInitalTransform(d,i) { return "translate(...)"; } 
function getFinalTransform(d,i) { return "translate(...)"; } 

path 
    .attr("d", getPathData) 
    .attr("transform", getInitalTransform) 
    .transition() 
    .ease("linear") 
    .attr("transform", getFinalTransform);