전환이있는 선형/증분 회전 애니메이션

Question

D3의 변환 속성과 전환 방법을 사용하여 SVG 모양을 회전하려고합니다. 여기에 예제가 들어있는 jsfiddle이 있습니다 : http://jsfiddle.net/TJd2a/

저는 45도 또는 -45도 각도로 증가시켜 사각형을 회전시키기 위해 왼쪽과 오른쪽의 두 버튼을 사용합니다. 모양이 180도 또는 -180도에 도달하면 전환은 다음 각도로 선형 이동하는 대신 모양을 반대 방향으로 회전합니다. 콘솔 로깅을 사용하여 코드가 생성하는 각도에 문제가 없음을 발견했습니다. 생성 된 XML이 현재와 동일한 각도를 나타내지 않으므로 D3에서 전환을 처리하는 방법이 나타납니다 (예 : 225도, D3은 직사각형 대신 -135의 회전을 제공).

문서에서 읽고 이해 한 내용을 토대로 사용자 정의 트윈을 사용해야하지만 사용자 정의 트윈으로 시작할 위치가 확실하지 않아 특정 또는 유사한 예제를 찾지 못했습니다. 그것이 어떻게 작동하는지 이해하십시오.

Answer 1

정확함; 사용자 정의 트윈을 사용하여 보간기를 변경할 수 있습니다. D3에는 interpolator for transforms이라는 특수 문자가 있지만 귀하의 경우에는 올바르게 작동하지 않습니다. (. 내가 그 아마 수정되어야 버그 생각, 그래서 issue 661를 출원) 여기에 대신 interpolateString를 사용하는 예이다 : 당신의 대답에 대한

d3.select("rect").transition().attrTween("transform", function(d) { 
    return d3.interpolateString(
    "rotate("+ d.a +")", 
    "rotate(" + (d.a += 45) + ")" 
); 
});