dc.js 未选择 HeatMap crossfilter 灰色

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

现在看起来您的颜色访问器将 return NaN 用于任何从中删除任何内容的容器，因为

+"null" === NaN

注意

+null === 0

但我们不一定想要那样，因为我们希望所有东西都被移除的箱子有一种特殊的颜色，而不是 "the zero color"。

如果你包含一个 fiddle 之类的东西会更容易尝试，但我认为你应该能够通过以下更改到达那里：

当 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（不同于 undefined 将转到 NaN).

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

使用最近的 un-deprecated colorCalculator 来检测 null 并使用我们为它们选择的灰色。否则我们像往常一样通过色标传递颜色：

heatMap
    .colorCalculator(function(d, i) {
        return d.value.color === null ?
            '#ccc' : heatMap.colors()(d.value.color);
    });

请注意，在内部，dc.js 图表使用 .selected 和 .deselected 类来显示哪些项目被画笔选中，哪些没有，但那样会在这里会很复杂（特别是如果你仍然想要画笔工作），所以使用相同的颜色会更容易。

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

或者……`scale.unknown()`?

也可以使用 scale.unknown() 来达到这个目的，但它对 D3 5.8 来说是全新的，我还没有尝试过。像

heatMap.colors().unknown('#ccc')

dc.js 未选择 HeatMap crossfilter 灰色

dc.js HeatMap crossfilter grey un-selected

dc.js

当 n 变为零时，正确地消除你的颜色：

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

或者……scale.unknown()?

或者……`scale.unknown()`?