如何使用 d3.transition 链接 JS 函数

Question

我用 d3 创建了一个条形图，它从数组中提取条形大小。 所以我试图用一个函数交换器在相邻条之间移动动画，它有效，但只有一次。酒吧在第一次通话时交换位置，但会忽略第二次通话。我认为问题在于第二次调用函数是在第一次转换完成之前执行的。如何拨打第二个电话以等待第一个电话完成？

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);

Answer 1

看看.end()

返回一个承诺，当每个选定的元素完成过渡时，该承诺会解决。如果任何元素的转换被取消或中断，promise 就会拒绝。

也许是这样的

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);
});