热图按日期隐藏列答案

【问题标题】：heat map hide columns by date热图按日期隐藏列
【发布时间】：2019-02-15 19:18:07
【问题描述】：

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

https://jsfiddle.net/_M_M_/fLvugo3h/

【问题讨论】：

标签： javascript d3.js dc.js

【解决方案1】：

我观察到，有时热图数据不会被当前选择的年份过滤，导致出现灰色单元格。希望这与您描述的问题相同！

我不确定这里出了什么问题，但我注意到 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 以及点击事件处理程序有关的所有内容。

https://jsfiddle.net/gordonwoodhull/8npv5zhq/19/

如果没有深入调试会话，我的猜测是它们不同步，因为 dc.js 的许多点击处理程序都是异步的。因此，您的处理程序可能会在 dc.js 过滤代码的不同时间被调用。

【讨论】：