Soy bastante nuevo en D3 y generé un gráfico de arco segmentado/media rosquilla como se muestra a continuación

Usé d3.pie y arc para generar este gráfico de arco segmentado. Código a continuación:

 let pieGenerator = d3 .pie() .startAngle(-0.75 * Math.PI) .endAngle(0.75 * Math.PI) .padAngle(0.05) .sort(null); let pieGeneratorForeground = d3.pie().startAngle(-0.75 * Math.PI); var data = [60, 20, 20, 20, 40]; // Create an arc generator with configuration var arcGenerator = d3.arc().innerRadius(85).outerRadius(100).cornerRadius(5); var arcData = pieGenerator(data); console.log(arcData); // Create a path element and set its d attribute let arc = d3 .select("g") .selectAll("path") .data(arcData) .join("path") .attr("d", arcGenerator);

Lo que me gustaría hacer es llenar el arco, comenzando desde el extremo izquierdo, hasta cualquier valor entre 250 y 850 con una transición. Me cuesta encontrar un ejemplo para hacer esto con el uso de d3.pie y d3.arc (ya que eso es lo que usé para generar el arco segmentado). Los ejemplos que miré son: arc-progress , arc-gauge Cualquier ayuda o enlace sería muy apreciado. Sé que necesito usar una función de interpolación, pero no estaba seguro de cómo una función de interpolación podría 'llenar'/transicionar el arco de primer plano entre los espacios segmentados. Aquí hay un enlace a un ejemplo funcional de lo que tengo hasta ahora: codepen