Question

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

1 个答案: