在 d3 v6 中完成转换后，如何使用 d3 transition end 调用函数？答案

【问题标题】：How do I use d3 transition end to invoke a function after the transition has completed in d3 v6?在 d3 v6 中完成转换后，如何使用 d3 transition end 调用函数？
【发布时间】：2021-04-28 16:53:15
【问题描述】：

当我的条形图呈现时，我正在执行一些转换。

这些转换完成后，我想要渲染这些值。

我正在尝试使用 d3 transition.end，但看起来代码与以前的版本相比有所更改 - 我使用的是 v6。

下面的代码运行没有任何延迟 - 它不会在调用函数之前等待转换完成。

我也尝试过.end(renderValuesInBars(data, metric, countryID, measurements) )，但同样的事情发生了。

我哪里错了？

    function renderVerticalBars(data, measurements, metric, countryID) {



    let selectDataForBarCharts = d3.select("svg")
        .selectAll("rect")
        .data(data, d => d[countryID])


    selectDataForBarCharts
        .enter()
        .append("rect")
        .attr('width', measurements.xScale.bandwidth())
        .attr("height", 0)
        .attr('y', d => measurements.yScale(0))
        .merge(selectDataForBarCharts)
        .transition().delay(500)
        .attr("transform", `translate(0, ${measurements.margin.top})`)
        .attr('width', measurements.xScale.bandwidth())
        .attr('x', (d) => measurements.xScale(d[countryID]))
        .transition()
        .ease(d3.easeLinear)
        .duration(setSpeed())
        .attr("height", d => measurements.innerHeight - measurements.yScale(d[metric]))
        .attr("y", (d) => measurements.yScale(d[metric]))
        .attr("fill", d => setBarColor(d))
        .on("end", renderValuesInBars(data, metric, countryID, measurements) )
                   

    selectDataForBarCharts.exit()
        .transition().duration(500).attr("height", 0).attr("y", d => measurements.yScale(0)).remove()
          
}

【问题讨论】：

标签： d3.js transition

【解决方案1】：

请注意，.on("end", ...) 方法为第二个参数接收一个回调，该回调在转换结束时执行。您发布的代码没有传递回调，但在声明时已经评估了 renderValuesInBars 函数。相反，您想传递一个回调，告诉 d3 评估应该在以后发生（在这种情况下，在转换之后）

代替：

.on("end", renderValuesInBars(data, metric, countryID, measurements))

您可以传递一个评估函数的回调：

on("end", ( ) => renderValuesInBars(data, metric, countryID, measurements))

这样你会传递一个回调，上面写着“在转换结束时，评估renderValuesInBars”

【讨论】：