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

Question

我在呈现条形图时进行了多次转换。

这些转换完成后，我想要呈现这些值。

我正在尝试使用 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()
          
}

Answer 1

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

而不是：

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

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

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

这样你就传递了一个回调，表示“在转换结束时，计算 renderValuesInBars”

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

How do I use d3 transition end to invoke a function after the transition has completed in d3 v6?

transition

d3.js