back · main · about · writing · notes · reading · d3 · now · contact


The story of d3 and the Start and End event listeners.
29 May 2016 · 388 words

One of the cool things about d3 is that we can “listen” for transition events.

These listeners can be very useful things.

I’ll go through two of these in this blog post: start, and end. The use of these is best explained through examples.

Let’s start with the start listener (ha!).

Start listeners

One use of a start listener is to trigger a function to run at the start of a transition.

Let’s set up a circle to use as an example:

var svg  = d3.select("body").append("svg")
			.attr("height", 500)
			.attr("width", 800);

svg.append("circle")
	.attr("cx", 100)
	.attr("cy",100)
	.attr("r", 10)
	.style("fill", "black");

Changing the colour of the black circle to blue is easy:

d3.select("circle")
	.transition()
	.delay(750)
	.style("fill", "blue");	

What if we wanted to change the colour of the black circle from green to blue? That is:

Enter: the d3 start listener.

We “listen” for the transition, and when it begins, we can trigger a function through the use of selection.each. In this case, our function will be to change the colour of the circle from black to green. The transition will then kick in and change the colour of the circle from green to blue over a time period.

d3.select("circle")
	.transition()
	.delay(750)
	.each("start", function() {d3.select(this).style("fill", "green");    } )
	.style("fill", "blue");

Hang on - did that change anything?

Right. We should make the transition longer so that we can actually see the results:

d3.select("circle")
	.transition()
	.delay(750)
	.duration(3000)
	.each("start", function() {d3.select(this).style("fill", "green");    } )
	.style("fill", "blue");

That did it!

End listeners

To stave off boredom, we will now move to changing the radius of the circle instead of the colour.

Let’s say we want to:

We can do this by utilising the listener for the end event. This will allow us to specify a function that will execute when the transition finishes.

d3.select("circle")
	.transition()
	.delay(750)
	.duration(1000)
	.each("start", function() {d3.select(this).attr("r", "80");    } )
	.attr("r", 10)
	.each("end", function() {d3.select(this).attr("r", "80")} );

To summarise

Use start listeners to run a function right before a transition starts.

Use end listeners to run a function right after a transition ends.


back · main · about · writing · notes · reading · d3 · now · contact