Tengo una función que genera una "aguja" SVG, que es parte de un indicador (piense en un velocímetro).

 function calculateNeedlePath(params: { percentage: number; needleLength: number; needleRadius: number; }) { const { percentage, needleLength, needleRadius } = params; const thetaRad = percentageToRadians(percentage / arcSegmentSize); const centerX = 0; const centerY = 0; const topX = centerX - needleLength * Math.cos(thetaRad); const topY = centerY - needleLength * Math.sin(thetaRad); const leftX = centerX - needleRadius * Math.cos(thetaRad - Math.PI / 2); const leftY = centerY - needleRadius * Math.sin(thetaRad - Math.PI / 2); const rightX = centerX - needleRadius * Math.cos(thetaRad + Math.PI / 2); const rightY = centerY - needleRadius * Math.sin(thetaRad + Math.PI / 2); return `M ${leftX} ${leftY} C ${p1.x} ${p1.y} ${topX} ${topY} T ${rightX} ${rightY}`; }

He adaptado este tutorial muy útil de Jake Trents aquí: https://jaketrent.com/post/rotate-gauge-needle-in-d3

Necesito utilizar una curva cuadrática para curvar la punta de la aguja (el vértice del triángulo).

He intentado posicionar el punto para que siempre esté a un lado del triángulo (mientras permanece siempre paralelo a la base del triángulo) agregando estas líneas y ajustando la declaración de retorno de la siguiente manera:

 const angleOfHalfNeedlePoint = Math.atan(needleLength / needleRadius); const angleOfLineVector = (degreesToRadians(180) - angleOfHalfNeedlePoint * 2) / 2; const lengthOfBezierCurve = 10; const q = { x: centerX - lengthOfBezierCurve * Math.cos(angleOfLineVector), y: centerY - lengthOfBezierCurve * Math.sin(angleOfLineVector) }; return `M ${leftX} ${leftY} Q ${qx} ${qy} ${topX} ${topY} T ${rightX} ${rightY}`;

El resultado es que la aguja muta a medida que gira en el indicador y necesito que mantenga una forma constante.

Un diagrama:

Aquí está el resultado: