作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我用 dc.js 制作了一个热图,我想知道 dc.js 中是否有热图的键或图例函数。我在互联网上搜索过,但似乎找不到内置的方法,那么有没有其他人解决过这个问题?
最佳答案
我遇到了同样的任务,我所做的是我制作了第二张热图,它是从最小值到最大值的一行。
var range = maxValue - minValue;
var heatArr = [];
for (var i = 0; i < 24; i++) {
heatArr.push({
val: minValue + i / 23 * rangeValue,
index: i
});
}
var ndx = crossfilter(heatArr);
var keyHeatmap = ndx.dimension(function(d) {
return [d.index, 1];
});
var keyHeatmapGroup = keyHeatmap.group().reduceSum(function(d) {
return d.val;
});
var heatmapChart = dc.heatMap("#heatmapKey");
var heatColorMapping = function(d) {
return d3.scale.linear().domain([minValue, maxValue]).range(["blue", "red"])(d);
};
heatColorMapping.domain = function() {
return [minValue, maxValue];
};
heatmapChart.width(400)
.height(80)
.dimension(keyHeatmap)
.group(keyHeatmapGroup)
.colorAccessor(function(d) {
return d.value;
})
.keyAccessor(function(d) { return d.key[0]; })
.valueAccessor(function(d) { return d.key[1]; })
.colsLabel(function(d){
return heatArr[d].val.toFixed(0);
})
.rowsLabel(function(d) {
return "Key";
})
.transitionDuration(0)
.colors(heatColorMapping1)
.calculateColorDomain();
heatmapChart.xBorderRadius(0);
heatmapChart.yBorderRadius(0);
minValue 和 maxValue 是在我原来的热图中找到的。我的最终结果如下所示:
关于dc.js - 有没有办法用 dc.js 为热图制作键或图例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31441536/
我是一名优秀的程序员,十分优秀!