D3.js 当应用交叉过滤器时，是否有方法为dc.js中的heatmap中未选择的框设置默认颜色？

当我在热图中选择一个单元格时，周围的单元格变成灰色，这是在DC CSS样式文件中定义的。当在两个热图之间应用交叉过滤器时，其他热图中剩余的不匹配单元格将根据我假设上传的数据集变成各自的颜色。是否有办法将其设置为默认灰色，如第一个选定的热图中所示

          var data = [
         {
      [
   {
 "x54": -0.882989,
"x1": -0.696828,
 "row": 1,
 "column": 1
 },
 {
 "x54": -0.876465,
 "x1": -0.644057,
 "row": 1,
 "column": 2
 },
 {
 "x54": -0.826277,
 "x1": -0.307709,
 "row": 1,
 "column": 3
 },
 {
 "x54": -0.72772,
 "x1": -0.197103,
 "row": 1,
 "column": 4
 },
 {
 "x54": -0.439598,
 "x1": -0.41709,
 "row": 1,
 "column": 5
 },
 {
 "x54": -0.153818,
 "x1": -0.663918,
 "row": 1,
 "column": 6
 },
 {
 "x54": -0.083729,
 "x1": -0.832624,
 "row": 1,
 "column": 7
 },
 {
 "x54": 0.185048,
 "x1": -1.058972,
 "row": 1,
 "column": 8
 },
 {
 "x54": 0.74784,
 "x1": -0.79349,
 "row": 1,
 "column": 9
 },
 {
 "x54": 0.880683,
 "x1": -0.678627,
 "row": 1,
 "column": 10
 },
 {
 "x54": -1.222528,
 "x1": -0.234477,
 "row": 2,
 "column": 1
 },
 {
 "x54": -1.201995,
 "x1": -0.22677,
 "row": 2,
 "column": 2
 },
 {
 "x54": -1.047466,
 "x1": -0.176348,
 "row": 2,
 "column": 3
 },
 {
 "x54": -0.883628,
 "x1": -0.195366,
 "row": 2,
 "column": 4
 },
 {
 "x54": -0.554343,
 "x1": -0.406823,
 "row": 2,
 "column": 5
 },
 {
 "x54": -0.188488,
 "x1": -0.74227,
 "row": 2,
 "column": 6
 },
 {
"x54": -0.153185,
 "x1": -1.211219,
 "row": 2,
 "column": 7
  },
 {
 "x54": -0.123571,
 "x1": -1.544932,
 "row": 2,
 "column": 8
 },
 {
 "x54": 0.307304,
 "x1": -1.222773,
 "row": 2,
 "column": 9
 },
 {
 "x54": 0.760703,
 "x1": -0.794464,
 "row": 2,
 "column": 10
 },
 {
 "x54": -1.787903,
 "x1": 0.53784,
 "row": 3,
 "column": 1
 },
 {
 "x54": -1.759356,
 "x1": 0.456399,
 "row": 3,
 "column": 2
 },
 {
 "x54": -1.597539,
 "x1": -0.003567,
 "row": 3,
 "column": 3
 },
 {
 "x54": -1.494041,
 "x1": -0.208856,
  "row": 3,
 "column": 4
 },
 {
 "x54": -1.203471,
 "x1": -0.276973,
 "row": 3,
 "column": 5
 },
 {
 "x54": -0.237502,
 "x1": -0.613778,
 "row": 3,
 "column": 6
 },
 {
 "x54": -0.043425,
 "x1": -1.219936,
 "row": 3,
 "column": 7
 },
 {
 "x54": -0.157964,
 "x1": -1.560531,
 "row": 3,
 "column": 8
 },
 {
 "x54": -0.109837,
 "x1": -1.596408,
 "row": 3,
 "column": 9
 },
 {
 "x54": 0.313007,
 "x1": -1.216265,
 "row": 3,
 "column": 10
 },
 {
 "x54": -1.848956,
 "x1": 0.711575,
 "row": 4,
 "column": 1
 },
 {
 "x54": -1.786463,
 "x1": 0.516668,
 "row": 4,
 "column": 2
 },
 {
 "x54": -1.66119,
 "x1": -0.071153,
 "row": 4,
 "column": 3
 },
 {
 "x54": -1.626694,
 "x1": -0.207817,
 "row": 4,
 "column": 4
 },
 {
 "x54": -1.277511,
 "x1": -0.107304,
 "row": 4,
 "column": 5
 },
 {
 "x54": 0.285612,
 "x1": 0.301386,
 "row": 4,
 "column": 6
 },
 {
 "x54": 0.566092,
 "x1": -0.054815,
 "row": 4,
 "column": 7
 },
 {
 "x54": 0.250711,
 "x1": -0.731451,
 "row": 4,
 "column": 8
 },
 {
 "x54": -0.011755,
 "x1": -1.239403,
 "row": 4,
 "column": 9
 },
 {
 "x54": -0.056915,
 "x1": -1.204161,
 "row": 4,
 "column": 10
 },
 {
 "x54": -1.227091,
 "x1": 0.295195,
 "row": 5,
 "column": 1
 },
 {
 "x54": -1.034244,
 "x1": 0.36743,
 "row": 5,
 "column": 2
 },
 {
 "x54": -0.965926,
 "x1": 0.2263,
  "row": 5,
 "column": 3
 },
 {
 "x54": -1.044771,
 "x1": -0.037899,
 "row": 5,
 "column": 4
 },
 {
 "x54": -0.352724,
 "x1": 0.032479,
 "row": 5,
 "column": 5
 },
 {
 "x54": 0.829276,
 "x1": 0.548374,
 "row": 5,
 "column": 6
 },
 {
 "x54": 0.980084,
 "x1": 0.609911,
 "row": 5,
 "column": 7
 },
 {
 "x54": 0.836985,
 "x1": 0.39424,
 "row": 5,
 "column": 8
 },
 {
 "x54": 0.433473,
 "x1": 0.266364,
 "row": 5,
 "column": 9
 },
 {
 "x54": 0.002185,
 "x1": 0.946293,
 "row": 5,
 "column": 10
    }
   ];
         var ndx = crossfilter (data);
var  runDim = ndx.dimension(function(d) { return [+d.row, +d.column]; }),
  runGroup = runDim.group().reduceSum(function(d) { return +d.x54; });

var  runDim1 = ndx.dimension(function(d) { return [+d.row, +d.column]; }),
  runGroup1 = runDim1.group().reduceSum(function(d) { return +d.x1; });

         chart
.width(45 * 20 + 80)
.height(45 * 5 + 40)
.dimension(runDim1)
.group(runGroup1)
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
    return "Run:   " + d.key[0] + "\n" +
           "Expt:  " + d.key[1] + "\n" +
           "Speed: " + (299000 + d.value) + " km/s";})         
 .colors(['#000080', '#00008b', '#000097', '#0000a3', '#0000ae', '#0000ba', '#0000c6', '#0000d1', '#0000dd', '#0000e9', '0000f5', '#0000ff', '#0000ff', '#0006ff', '#0011ff', '#001bff', '#0025ff', '#0030ff', '#003aff', '#0044ff', '#00fff', '#0059ff', '#0063ff', '#006dff', '#0078ff', '#0082ff', '#008cff', '#0097ff', '#00a1ff', '#00abff', '#00b6f', '#00c0ff', '#00caff', '#00d5ff', '#00dffc', '#03e9f4', '#0bf3ec', '#14fee3', '#1cffdb', '#24ffd3', '#2cffca', '#35ffc2', '#3dffba', '#45ffb1', '#4effa9', '#56ffa1', '#5eff98', '#67ff90', '#6fff88', '#77ff80', '#80ff77', '#8ff6f', '#90ff67', '#98ff5e', '#a1ff56', '#a9ff4e', '#b1ff45', '#baff3d', '#c2ff35', '#caff2c', '#d3ff24', '#dbff1c', '#e3ff14', '#ecff0b', '#f4f903', '#fcef00', '#ffe600', '#ffdc00', '#ffd300', '#ffc900', '#ffc000', '#ffb600', '#ffad00', '#ffa300', '#ff9900', '#ff9000', '#ff8600', '#ff7d00', '#ff7300', '#ff6a00', '#ff6000', '#ff5700', '#ff4d00', '#ff4400', '#ff3a00', '#ff3100', '#ff2700', '#ff1d00', '#ff1400', '#f50a00', '#e90100', '#dd0000', '#d0000', '#c60000', '#ba0000', '#ae0000', '#a30000', '#970000', '#8b0000','#800000'])
.calculateColorDomain();

          chart1
.width(45 * 20 + 80)
.height(45 * 5 + 40)
.dimension(runDim)
.group(runGroup)
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
    return "Run:   " + d.key[0] + "\n" +
           "Expt:  " + d.key[1] + "\n" +
           "Speed: " + (299000 + d.value) + " km/s";})
 .colors(['#000080', '#00008b', '#000097', '#0000a3', '#0000ae', '#0000ba', '#0000c6', '#0000d1', '#0000dd', '#0000e9', '0000f5', '#0000ff', '#0000ff', '#0006ff', '#0011ff', '#001bff', '#0025ff', '#0030ff', '#003aff', '#0044ff', '#00fff', '#0059ff', '#0063ff', '#006dff', '#0078ff', '#0082ff', '#008cff', '#0097ff', '#00a1ff', '#00abff', '#00b6f', '#00c0ff', '#00caff', '#00d5ff', '#00dffc', '#03e9f4', '#0bf3ec', '#14fee3', '#1cffdb', '#24ffd3', '#2cffca', '#35ffc2', '#3dffba', '#45ffb1', '#4effa9', '#56ffa1', '#5eff98', '#67ff90', '#6fff88', '#77ff80', '#80ff77', '#8ff6f', '#90ff67', '#98ff5e', '#a1ff56', '#a9ff4e', '#b1ff45', '#baff3d', '#c2ff35', '#caff2c', '#d3ff24', '#dbff1c', '#e3ff14', '#ecff0b', '#f4f903', '#fcef00', '#ffe600', '#ffdc00', '#ffd300', '#ffc900', '#ffc000', '#ffb600', '#ffad00', '#ffa300', '#ff9900', '#ff9000', '#ff8600', '#ff7d00', '#ff7300', '#ff6a00', '#ff6000', '#ff5700', '#ff4d00', '#ff4400', '#ff3a00', '#ff3100', '#ff2700', '#ff1d00', '#ff1400', '#f50a00', '#e90100', '#dd0000', '#d0000', '#c60000', '#ba0000', '#ae0000', '#a30000', '#970000', '#8b0000','#800000'])
.calculateColorDomain();

  dc.renderAll();

---

我遇到了一个类似的问题，我希望我的零值是一种特定的颜色，而其他任何东西都在色阶上。我在d3色标的默认值上看到了这一页，它工作得很好：

这里的想法是创建一个封装d3色阶的函数。如果为零值，则返回默认颜色，否则将该值传递给内部比例并返回结果值

创建包装函数后，将其传递到.colors中，而不是颜色数组中

请注意，您可能需要自己在函数上设置域和范围，如下所示：

colorScale.domain=colorScaleInternal.domain

---

colorScale.range=colorScaleInternal.range

以前在这里问过，但答案不完整：我会问我在那里评论过的同一个问题：您希望所有的零都显示为灰色，包括直接来自数据的零，还是仅显示来自过滤的零？在我的例子中，仅显示来自过滤的零。我希望它与dc.css中定义的颜色相同，即ccc，而不是拾取颜色数组中定义的第一种颜色。例如：颜色['000080'，'000092'，'0000a4']。对第一个问题的解释会有所帮助。提前感谢@Gordon应用交叉滤光片时出现的灰绿色也应为灰色，即ccc。