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

Question

是否可以轻松填充热图图表中数据源中未给定值的空白？我遇到的问题如下所示：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>

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

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

Fill in DC.JS Heat Map gap with default or calculated value

crossfilter

dc.js