Question

Adapted from the “binding two-dimensional data” part of: http://christopheviau.com/d3_tutorial/

dataset = new Array()
dataset[0] = ['first', 'second', 'third']

d3.select("#viz")
.append("table")
.style("margin", "0 auto")
.selectAll("tr")
.data(dataset)
.enter()
.append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter()
.append("td")
.style("border", "1px black solid")
.style("padding", "10px")
.text(function(d){return d;})
.style('font-size', '18pt')


.transition().delay(1000)
.text('nothing')

.transition()
.delay(1000)
.text('test');

Code also hosted here: http://jsfiddle.net/LittleBobbyTables/vEfgu/

This skips the stage where the text should say “nothing” and goes straight to it saying “test”.

Did I do something wrong?

Answer 1

Calling transitions one after another does not necessarily ‘chain’ them, in your example, after 1000ms both the first and second transitions are executed in tandem – so you do not see the results of the first. The easiest way to remedy this would be to change the delay in your second transition:

.transition().delay(2000)