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