d3.js를 사용하여 게이지 바늘을 애니메이션화하십시오.

Question

d3.js를 사용하여 게이지 바늘을 애니메이션하려고하지만 이상한 애니메이션이 생깁니다. 인터넷에서 일부 검색을했는데 문제를 해결하기 위해 어떤 솔루션을 사용할 수 있는지 파악할 수 없었습니다. 당신이 경로를 다시 그리는 대신 transform="rotate()"을 적용 할 경우

Codepen

function createNeedle(sampleAngle){ 
    topX = centerX - Math.cos(sampleAngle) * triLength 
    topY = centerY - Math.sin(sampleAngle) * triLength 

    leftX = centerX - 10 * Math.cos(sampleAngle - Math.PI/2) 
    leftY = centerY - 10 * Math.sin(sampleAngle - Math.PI/2) 

    rightX = centerX - 10 * Math.cos(sampleAngle + Math.PI/2) 
    rightY = centerY - 10 * Math.sin(sampleAngle + Math.PI/2) 


    return " M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY; 

    } 

    //animate the needle 
    d3.select('.moveNeedle') 
    .attr('d', createNeedle(sampleAngle1)) 
    .transition() 
    .duration(2000) 
    .attr('d', createNeedle(sampleAngle2)); 

Answer 1

당신은 너무 쉽게 당신의 인생을 만들 수 있습니다.

표준 d3.interpolateTransformSvg은 예상치 못한 방식으로 작동하므로 사용자 정의 트윈 기능을 제공해야합니다.

var topX = centerX - triLength, 
    topY = centerY, 

    leftX = centerX, 
    leftY = centerY + 10, 

    rightX = centerX, 
    rightY = centerY - 10; 

function rotateNeedle(sampleAngle){ 
    return "rotate(" + sampleAngle + "," + centerX + "," + centerY + ")"; 
} 

d3.select('.moveNeedle') 
    // only draw once 
    .attr('d', "M" + leftX + " " + leftY + " " + topX + " " + topY + " " + rightX + " " + rightY) 
    // supply angles in degrees! 
    .attr('transform', rotateNeedle(sampleAngle1)) 
    .transition() 
    .duration(2000) 
    .attrTween('transform', function() { 
     var i = d3.interpolate(sampleAngle1, sampleAngle2) 
     return function (t) { 
      return rotateNeedle(i(t)); 
     }; 
    });