Заполнить DC.JS Зазор тепловой карты по умолчанию или расчетному значению

Возможно ли легко заполнить пробелы в диаграмме HeatMap, которые не указаны в источнике данных? Проблема, которую я испытываю, проиллюстрирована здесь: https://jsfiddle.net/qk94cuaq/.Заполнить DC.JS Зазор тепловой карты по умолчанию или расчетному значению

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>

источник

2015-03-23 Anthony Clark

Правильный способ сделать это было бы, вероятно, расширить 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, 
     }); 
    } 
}

источник

2015-03-23 19:03:25 Milimetric

Заполнить DC.JS Зазор тепловой карты по умолчанию или расчетному значению

ответ

Смежные вопросы