[D3js] animé une selection d'arcs

Bonjour,

Je tente ma chance sur ce forum voire si quelqu'un s'y connait en d3js.

J'essaye d'animer une selections d'arcs créés avec des données et la fonction enter de d3.

Les données contiennent l'angle de fin de l'arc en radians (0 < valeur < PI x 2).
L'angle de début est toujours 0.

Si j'ai bien compris, les transitions ne sont pas si simple sur l'attribut "d" d'un path. j'essaye donc d'utiliser la méthode attrTween sans succès. Quelque chose m'échappe, mais si on trouve beaucoup d'exemple sur l'internet, on trouve très peu de tuto explicatif sur d3, et la doc n'est pas des plus facile à appréhender.

Mon code :

  const parent = document.getElementById("el")
  const diameter: number =  120
  const r: number = diameter / 2 // radius
  const ply: number = Math.round(r * 0.15) // epaisseur
  const values = [1, 2, 3]

  const canvas = d3.select(parent).append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + r + "," + r + ")")

// les arc deviennent de plus en plus petit
  const arc = d3.arc<any>()
    .innerRadius((d, i) => r - ply * (i + 1))
    .outerRadius((d, i) => r - ply * i)
    .startAngle(0)
    .endAngle((d, i) => values[i])

  const arcs = canvas.selectAll("path")
    .data(values)
    .enter()
    .append("path")
    .attr("fill", data.color)
    .transition()
     .delay(500)
    .duration(1000)
    .attrTween("d", (d, i) => {
      console.log("[attrTween] d", d) // affiche la valeur courante (angle de fin)
      console.log("[attrTween] i", i) // affiche l'index courant
      const interpolate = d3.interpolate(0, d)
      console.log("[interpolate] 0.5", interpolate(0.5)) // affiche bien la motiée de l'angle
      return t => {
        console.log("T :", interpolate(t)) //affiche plusieurs valeur en 0 et l'angle de fin
        return arc(arc.endAngle(d)(interpolate(t)))
      }
    })
    .attr("d", arc)

merci d'avance