[英]Difficulty with D3 transition for sortable heatmap
我在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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.