CODEWITHSUNDEEP
javascriptd3.js
Zubair
Zubair

Reputation: 119

using callback function with transition in D3.js

I want 2 function which create and animate a rectangle's "x" attribute to be executed one after another, so I used a callback. But they execute simultaneously. I know there is a transition.on("end") possibility but I want to understand why this doesnot work

var h = 600,w = 800;
var svg = d3.select("body").append("svg").attr("height", h).attr("width", w).append("g");

function a(callback){
  svg.append("rect").attr("width", 50) .attr("y", 0).attr("height", 50).style("fill", "orange")
    .transition()
    .duration(3000)
    .attr("x", 500)
callback()
}

function b(){
  svg.append("rect").attr("width", 50) .attr("y", 0).attr("x", 200).attr("height", 50).style("fill", "orange")
    .transition()
    .duration(3000)
    .attr("y", 500)}

a(b)

Upvotes: 1

Views: 212

Answers (1)

QurakNerd
QurakNerd

Reputation: 804

When you create a transition using D3 (and any other library that hasn't made terrible choices). It will not stop execution of the code. So simply put, when you call transition, that instruction is sent to a different part of the code to handle separately.

This is important because otherwise your code could do nothing while animations happened, not even react to user input

Upvotes: 2

Related Questions