Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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"


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...