从heatMap隐藏列

Question

我想隐藏列在我的热图根据我的yearSlicer(rowChart)选择的年份，但不是在任何其他交叉过滤器。

​

​

HeatMap：

                heatMap
                    .width(1500)
                    .height(800)
                    .dimension(dimension)
                    .group(FTEMonthGroup)
                    .margins({ left: 200, top: 30, right: 10, bottom: 35 })
                    .keyAccessor(function (d) { return d.key[0]; })
                    .valueAccessor(function (d) { return d.key[1]; })
                    .colorAccessor(function (d) { return +d.value.color; })
                    .title(function (d) {
                        return "Manager:   " + d.key[1] + "\n" +
                            "FTE:  " + d.value.toolTip + "\n" +
                            "Date: " + d.key[0] + "";
                    })
                    .on('renderlet', function (chart) {
                        chart.selectAll("g.cols.axis text")
                            .attr("transform", function () {
                                var coord = this.getBBox();
                                var x = coord.x + (coord.width / 2),
                                    y = coord.y + (coord.height / 2);
                                return "rotate(-45 " + x + " " + y + ")"

                            })
                            .style("text-anchor", "right");
                    });
                heatMap.colorCalculator(function (d, i) {
                    return d.value.color === null ?
                        '#ccc' : heatMap.colors()(d.value.color);
                });

编辑：

隐藏列“隐藏”在最左边的列下，导致单元格重叠：

​

​

当前的“工作”代码(重叠单元格)：

格式化日期并将其添加到2D数组中：

            var parseTime = d3.timeParse("%m/%d/%Y");
            var formatTimeYear = d3.timeFormat("%Y");
            var formatTimeMonth = d3.timeFormat("%Y - %m");
            data.forEach(function (d) {
                d.Year = formatTimeYear(parseTime(d.Month));
                d.Month = formatTimeMonth(parseTime(d.Month));
            });

                var arrayMonths = {};
                ndx.dimension(function (d) { return d }).top(Infinity).forEach(function (d) {
                    if (arrayMonths[d.Year]) {
                        arrayMonths[d.Year].add(d.Month);
                    } else {
                        arrayMonths[d.Year] = new Set();
                    }
                });

onClick调用函数“隐藏”未选定的年份：

                var yearsHidden = [];
                var hideYear = function (year) {
                    var index = yearsHidden.indexOf(year);
                    if (index === -1) {
                        yearsHidden.push(year);
                    } else {
                        yearsHidden.splice(index, 1);
                    }
                    var yearsHiddenArray = null;
                    yearsHidden.forEach(function (yearAdd) {
                        if (yearsHiddenArray === null) {
                            yearsHiddenArray = Array.from(arrayMonths[yearAdd]);
                        } else {
                            yearsHiddenArray = yearsHiddenArray.concat(Array.from(arrayMonths[yearAdd]));
                        }
                    })
                    heatMap.cols(yearsHiddenArray);
                    heatMap.redraw();
                    // console.log(yearsHiddenArray);
                }

yearSlicer(rowChart) onClick：

            yearSlicer.on("renderlet.somename", function (chart) {
                chart.selectAll('rect').on("click", function (d) {
                    // console.log("Key: " + d.key);
                    hideYear(d.key);
                });
            });

编辑2:

在实现建议的解决方案时遇到了一些困难，下面是我的分组：

            var dimension = ndx.dimension(function (d) { return [d.Month, d["Manager"]]; }),
                FTEMonthGroup = dimension.group().reduce(
                    function reduceAdd(p, v) {
                        ++p.n;
                        p.color += v.FTE;
                        p.toolTip += v.FTE;
                        return p;
                    },

                    function reduceRemove(p, v) {
                        --p.n;
                        if (p.n === 0) {
                            p.color = null;
                            p.toolTip = null;
                        }
                        return p;
                    },

                    function reduceInitial() {
                        return { n: 0, color: 0, toolTip: 0 };
                    });

Answer 1

不幸的是，尽管.cols()和.rows()应该作为一个筛选器工作很明显，但是看起来图表仍然显示组中的每个条目，不管它是否列在行和cols中。由于默认情况是从数据中提取行和列的列表，所以我不确定rows和cols是否有多大的效果，除非在不指定rowOrdering和colOrdering的情况下提供不同的排序。

我想你需要一个假的团体，垃圾桶说

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 !yearsHiddenArray.includes(d.Year);
}
heatMap.group(filtered_years_group);

..。或者类似的东西。你知道该怎么做！