用默认值或计算值填充 DC.JS 热图间隙答案

【问题标题】：Fill in DC.JS Heat Map gap with default or calculated value用默认值或计算值填充 DC.JS 热图间隙
【发布时间】：2015-03-23 18:37:18
【问题描述】：

是否可以轻松地填补热图图表中数据源中未给定值的空白？我遇到的问题在这里说明：https://jsfiddle.net/qk94cuaq/。

var data = [{Expt: 1,Run: 1, Speed: 850},
{Expt: 1,Run: 2, Speed: 740},
{Expt: 2,Run: 2, Speed: 940},
{Expt: 3,Run: 1, Speed: 880},
{Expt: 3,Run: 3, Speed: 880},];

var chart = dc.heatMap("#test");

var ndx = crossfilter(data),
    runDim = ndx.dimension(function (d) {
        return [+d.Run, +d.Expt];
    }),
    runGroup = runDim.group().reduceSum(function (d) {
        return +d.Speed;
    });

chart.width(45 * 4 + 80)
    .height(45 * 4 + 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;
})
    .colors(["#ffffd9", "#edf8b1", "#c7e9b4",
    "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"])
    .calculateColorDomain();

chart.render();

<link href="https://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<body>
     <h2> Heat Map Testing </h2>

    <div id="test" class="dc-chart"></div>
</body>

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

正确的做法可能是扩展 dc.js 并为您提供所需的选项。然后每个人都可以受益。在 d3 中它会相对简单，并且与我为您的特定情况提供的解决方案相当接近。

因此，如果您不想将更改上传到上游，只需transform your data：

var dataDict = {};
data.forEach(function (item) {
    dataDict[item.Expt + '|' + item.Run] = item;
});
var dataCoalesced = [];
for (var expt = 1; expt <= 5; expt ++) {
    for (var run = 1; run <= 20; run ++) {
        dataCoalesced.push(dataDict[expt + '|' + run] || {
            Expt: expt,
            Run: run,
            Speed: 0,
        });
    }
}

【讨论】：