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

Question

I am doing a number of transitions when my bar chart renders.

After these transitions have completed, I would like the values to render.

I am trying to use d3 transition.end but it looks like the code has changed from previous versions - I am using v6.

The code below runs without any delay - it doesn't wait for the transition to complete before invoking the function.

I have also tried .end(renderValuesInBars(data, metric, countryID, measurements) ) but the same thing happens.

Where am I going wrong?

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

question from:https://stackoverflow.com/questions/65875370/how-do-i-use-d3-transition-end-to-invoke-a-function-after-the-transition-has-com

Answer 1

Note that the .on("end", ...) method takes a callback for the second argument, which is executed when the transition ends. The code you posted is not passing a callback, but already evaluating the renderValuesInBars function at the moment of declaration. Instead, you want to pass a callback that tells d3 that the evaluation should occur at a later time (in that case, after the transition)

Instead of:

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

You can pass a callback that evaluates the function:

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

That way you're passing a callback that says "at the end of the transition, evaluate renderValuesInBars"