Difficulty with D3 transition for sortable heatmap

Question

I've got a sortable heat map that I've created in D3 shown here: http://bl.ocks.org/umcrcooke/5703304

When I click on the year (column) the initial sort/transition works well, but subsequent clicks resorts, but without the transition. I'm having difficulty troubleshooting it. The code for the transition listed below:

I've set it up such that when the column text is clicked the update function executes:

.on("click", function(d,i) { return d3.transition().each(update(d));});

And the relevant pieces of the update function are:

function update(year) {

grid.selectAll('rect')
.transition()
.duration(2500)
.attr("y", function(d) { return (sortOrder[year].indexOf(d.Country))*cell.height; })

grid.selectAll(".cell_label")
.transition()
.duration(2500)
.attr("y", function(d) { return (sortOrder[year].indexOf(d.Country))*cell.height +      (cell.height-cell.border)/2; })

d3.selectAll(".row_label")
.sort(function(a, b) {
        return d3.ascending(+a[year], +b[year]);
      })
.transition()
.duration(2500) 
.attr("y", function(d, i) { return (i*cell.height) + (cell.height-cell.border)/2; });
}

Answer 1

I'm not sure what you're trying to do with d3.transition().each() in the handler, but you don't need it. Changing to:

.on("click", function(d,i) { update(d); });

fixes the problem. See fiddle: http://jsfiddle.net/nrabinowitz/Lk5Pw/