Javascript 可排序热图的D3转换困难

我在D3中创建了一个可排序的热图，如下所示：

当我单击年份（列）时，最初的排序/转换工作正常，但随后的单击无效，但没有转换。我很难排除故障。转换代码如下所示：

我将其设置为，当单击列文本时，更新函数将执行：

.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; });
}

---

我不确定你想用处理程序中的

d3.transition（）.each（）

做什么，但你不需要它。改为：

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

解决了这个问题。参见小提琴：