d3.jsを使用してゲージ針をアニメーション化する

Question

d3.jsを使用してゲージ針をアニメートしようとしていますが、奇妙なアニメーションになります。私はインターネットからいくつかの検索を行っていますが、問題を解決するためにどのような解決方法を使うことができないのか分かりません。

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

あなたの代わりに、パスを再描画のtransform="rotate()"を適用する場合は、そんなに簡単にあなたの人生を作ることができます。

しかし、標準d3.interpolateTransformSvgが予期しない動作をするため、カスタムTween関数を指定する必要があります。

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)); 
     }; 
    });