javascript - 从热图中隐藏列

Question

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

热图:

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

编辑:

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

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

格式化日期并将它们添加到二维数组中:

            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() 似乎很明显应该用作过滤器，但看起来图表仍然显示了该组，无论它是否列在行和列中。由于默认是从数据中提取行和列的列表，我不确定 rows 和 cols 有多大影响，除非你不提供不同的顺序不要指定 rowOrdering 和 colOrdering。

我想你需要在这里设置一个假的组，比如说 filter_bins :

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

... 或类似的东西。你知道演习!