dc.js HeatMap交叉过滤器灰色未选中

Question

如果希望在热图的x轴上选择日期，或者从yearSlicer（rowChart）中选择日期，我希望热图以同样的方式进行反应

我尝试使用这些帖子：

Is there a way to set a default color for the un-selected boxes in heatmap in dc.js when crossfilter is applied?

dc.js heatmap deselected colors

.colors function in barChart dc.js with only two options

Trying to Assign Color for Null values in a map D3,js v4

yearSlicer（rowChart）：

var yearSlicerDimension = ndx.dimension(function (d) {
                    return "" + d.Year;
                })
                yearSlicerGroup = yearSlicerDimension.group().reduceSum(function (d) {
                    return d.FTE;
                });

                yearSlicer
                    .title("")
                    .width(300)
                    .height(480)
                    .dimension(yearSlicerDimension)
                    .group(yearSlicerGroup)
                    .valueAccessor(function (kv) {
                        return kv.value > 0 ? 1 : 0; // If funtion to detect 0's
                    })
                    .ordering(function (d) { return -d.Year })
                    .xAxis().ticks(0)

热图：

 var dimension = ndx.dimension(function (d) { return [d.Year, d["Manager"]]; }),

                    FTEMonthGroup = dimension.group().reduce(

                        function reduceAdd(p, v) {
                            if (p.n === 0) {
                                p.color = 0;
                                p.toolTip = 0;
                            }
                            ++p.n;
                            p.color += v.FTE;
                            p.toolTip += v.FTE;
                            return p;
                        },

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

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

                heatMap
                    .width(900)
                    .height(800)
                    .dimension(dimension)
                    .group(FTEMonthGroup)
                    .margins({ left: 200, top: 30, right: 10, bottom: 20 })
                    .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] + "";
                    })
                    .calculateColorDomain()
                    .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 + ")"

                            })
                    });

我想要什么：

我得到的是

Answer 1

现在看来，您的颜色访问器将为其中已删除任何内容的任何垃圾箱返回NaN，因为

+"null" === NaN

请注意

+null === 0

但是我们并不一定想要那样，因为我们希望为已删除所有内容的垃圾箱提供特殊的颜色，而不是“零颜色”。

如果您包含小提琴或其他东西，尝试起来会更容易，但是我认为您应该能够通过以下更改到达那里：

当n变为零时，将您的颜色正确剔除：

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

根据定义，我们只需要检查删除，而不要检查添加，因为n永远不会在添加时变为零。将= null与+= v.FTE配对是可以的，因为如果在包含+=的变量上使用null，它将自动被强制转换为0（与{{ 1}}，将转到undefined）。

使用颜色计算器检测空值并产生灰色

使用最近的un-deprecated colorCalculator来检测NaN，并使用我们为它们选择的灰色。否则，我们将照常通过色标传递颜色：

null

请注意，在内部，dc.js图表​​使用heatMap .colorCalculator(function(d, i) { return d.value.color === null ? '#ccc' : heatMap.colors()(d.value.color); }); 和.selected类来显示画笔选择了哪些项目，哪些没有，但这在这里会很复杂（尤其是如果您仍然希望画笔可以工作），因此使用相同的颜色会更容易。

同样，这都是未经测试的，但是我认为这是正确的原则。 Lmk如果有任何问题，我将很乐意解决。

或者... .deselected？

为此也可以使用scale.unknown()，但是它对于D3 5.8是全新的，我还没有尝试过。

scale.unknown()