可排序热图的D3转换困难
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/
相关文章:
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- d3中的条件转换
- 重复应用 d3 转换导致的内存泄漏
- d3.tree=>转换似乎不起作用
- d3.js条形图转换无法正常工作
- d3使用样式Tween的百分比转换
- d3转换从页面加载开始,而不是从模式弹出加载开始
- 为什么d3.js饼图转换不起作用
- d3.select()在转换后不会立即工作
- D3在转换时退出多个系列折线图标签
- D3:使用 nest 函数将带有父键的平面数据转换为层次结构
- 如何取消d3.js中的鼠标悬停转换
- d3.pack()转换更新
- 如何将现有的d3区域转换为堆叠区域
- 使用setTimeout延迟d3转换
- D3可选转换
- D3.js转换多个圆弧路径
- D3-初始化后第一次转换时出现问题
- D3.js数据组和转换
- 使用或转换D3中的Lambert坐标