问题
When i select a cell in the Heatmap, the surrounding cells turn into a "grey" color which is defined in the DC CSS styling file. When the crossfilter is applied between two heatmaps the remaining un matched cells in the other maps turn to a respective color depending on the data set uploaded i'm assuming. Is there a way to set this to the default "grey" color as in the first selected Heatmap
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();
回答1:
I ran into a similar issue where I wanted my zero values to be a certain color while anything else to fall on the color scale. I came across this page on default values for a d3 color scale and it worked nicely:
d3 quantile scale force first quantile
The idea here is to create a function which wraps a d3 color scale. On a zero value return the default color otherwise pass the value to the internal scale and return the resulting value.
After creating the wrapper function, pass it into .colors() instead of the array of colors
Note that you may need to set the domain and range yourself on the function like this:
colorScale.domain = colorScaleInternal.domain;
colorScale.range = colorScaleInternal.range;
来源：https://stackoverflow.com/questions/52146808/is-there-a-way-to-set-a-default-color-for-the-un-selected-boxes-in-heatmap-in-dc