Creé un gráfico de barras con d3, que extrae los tamaños de barra de la matriz. Así que estoy tratando de animar el cambio entre barras adyacentes con un intercambiador de funciones, que funciona, pero solo una vez. Las barras están cambiando de lugar en la primera llamada, pero ignorarían la segunda llamada. Creo que el problema es que la segunda llamada a la función se ejecuta antes de que finalice la primera transición. ¿Cómo hago la segunda llamada para esperar a que termine la primera?
const data = utils.generateRandomArray(25,45); const width = "500px"; const height = "300px"; const graph1 = d3.select("#graph1").append("svg") .attr("height", height) .attr("width", width) .attr("style", "border: 1px solid black"); utils.renderGraph(graph1, data); utils.renderGraph(graph2, data); const bar1 = graph1.select(".bar-1"); const bar2 = graph1.select(".bar-2"); const bar3 = graph1.select(".bar-3"); const bar4 = graph1.select(".bar-4"); function swapper(bar1,bar2){ bar1.transition() .delay(1000) .duration(2000) .attr("x", `${bar2.attr("x")}`); bar2.transition() .delay(1000) .duration(2000) .attr("x", `${bar1.attr("x")}`); } swapper(bar1,bar2); swapper(bar1,bar2);Echa un vistazo a .end()
Devuelve una promesa que se resuelve cuando cada elemento seleccionado finaliza la transición. Si la transición de algún elemento es cancelada o interrumpida, la promesa se rechaza.
Así que tal vez algo como
async function swapper(bar1,bar2){ const bar1Transition = bar1.transition() .delay(1000) .duration(2000) .attr("x", `${bar2.attr("x")}`); const bar2Transition = bar2.transition() .delay(1000) .duration(2000) .attr("x", `${bar1.attr("x")}`); return Promise.all([bar1Transition.end(), bar2Transition.end()]); } swapper(bar1,bar2).then( () => { return swapper(bar1,bar2); });