D3過渡難以進行可排序的熱圖

Question

我在D3中創建了一個可排序的熱圖，如下所示： http : //bl.ocks.org/umcrcooke/5703304

當我單擊年份（列）時，最初的排序/轉換效果很好，但隨后的單擊卻恢復了，但沒有轉換。 我很難對其進行故障排除。 下面列出了轉換代碼：

我已經進行了設置，以便在單擊列文本時執行更新功能：

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

更新功能的相關部分包括：

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

我不確定您要在處理程序中使用d3.transition().each()做什么，但是您不需要它。 更改為：

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

解決問題。 參見小提琴： http : //jsfiddle.net/nrabinowitz/Lk5Pw/