javascript - 热图按日期隐藏列
问题描述
Iv 设置自定义 onClick 事件以使用“假组”隐藏热图中的列。一切正常,只要您等到动画完成后再单击 yearSlicer 中的另一年。在完成加载之前单击会导致不需要的结果。
假组:
function filter_bins(source_group, f) {
return {
all: function () {
return source_group.all().filter(function (d) {
return f(d.value);
});
}
};
}
var filtered_years_group = filter_bins(FTEMonthGroup, function (d) {
return yearsHidden.length == 0 ? !yearsHidden.includes(d.Year) : yearsHidden.includes(d.Year);
});
yearSlicer onClick:
yearSlicer.on("renderlet.somename", function (chart) {
chart.selectAll('rect').on("click", function (d) {
hideYear(d.key);
return chart._onClick(d)
});
});
设置隐藏年份:
var yearsHidden = [];
var hideYear = function (year) {
var index = yearsHidden.indexOf(year);
if (index === -1) {
yearsHidden.push(year);
} else {
yearsHidden.splice(index, 1);
}
heatMap.redraw();
}
解决方案
我观察到有时热图数据不会被当前选择的年份过滤,导致出现灰色单元格。希望这与您描述的问题相同!
我不确定这里出了什么问题,但我注意到 yearsHidden 与yearSlicer.filters()
- 您正在复制图表已经具有的切换行为。
通过删除代码来修复错误总是很好的。我发现我可以通过将filter_bins
函数更改为来修复它
var filtered_years_group = filter_bins(FTEMonthGroup, function(d) {
var years = yearSlicer.filters();
return years.length ? years.includes(d.Year) : true;
});
然后删除与 相关的所有内容yearsHidden
,以及 click 事件处理程序。
https://jsfiddle.net/gordonwoodhull/8npv5zhq/19/
在没有深入调试会话的情况下,我的猜测是它们不同步,因为 dc.js 的许多点击处理程序都是异步的。因此,您的处理程序可能会在 dc.js 过滤代码的不同时间被调用。
推荐阅读
- powershell - 设置用户帐户密码时出现不可预测的输出
- ios - 在 Objective-C 中以动态和编程方式调整 UIView 的大小
- rollupjs - Rollup.js:重现 Babel 模块解析器的任何方式(例如 ~/foo => src/foo)
- javascript - 使用用户输入进行错误检查
- ios - viewDidAppear 中的代码未执行
- java - 使用 Smook 和 Freemarker 将 Java 对象转换为 XML 的模型是什么?
- php - 如何将两个表合并为一个整体,根据所选变量更改位置?
- php - 使用 PHP 将字符串与 LARGE 文本文件(或...数据库?)进行比较
- c# - 从材质更改反照率
- c# - 为什么 .edmx 自动生成不再在 .net 核心中