可排序热图的D3转换困难

Difficulty with D3 transition for sortable heatmap

本文关键字:转换 D3 排序      更新时间:2023-09-26

我在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; });
}

我不确定你想在处理程序中用d3.transition().each()做什么,但你不需要它。更改为:

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

修复了问题。参见小提琴:http://jsfiddle.net/nrabinowitz/Lk5Pw/