DC.js 每行热图色标

Question

我有一个热图，想为每一行单独设置配色方案。那可能吗？使用以下代码，我可以创建一个工作热图，但所有行的颜色都相同。

fooHeatmap = dc.heatMap("#fooHeatmap")
                .width(width)
                .height(height)
                .dimension(fooDim)
                .group(fooGroup)
                .keyAccessor(function(d) { return d.key[0]; })
                .valueAccessor(function(d) { return d.key[1]; })
                .colorAccessor(function(d) { return d.value; })
                .colors(d3.scale.linear()
                    .domain([0,1, fooGroup.top(1)[0].value])
                    .range(["#bbb","#D0DDFF","blue"]))

Answer 1

dc.js 每个图表仅使用一个色标，但您可以将 d.key[1] 组合到颜色访问器中以创建不相交的颜色空间，并为颜色指定多个域值缩放以创建多个颜色范围。

这叫做polylinear scale。

例如如果 d.value 介于 0.0 和 1.0 之间，并且 .d.key[1] 是 0,1,2,3...:[=16=]

 .colorAccessor(function(d) { return d.key[1]*2 + d.value; })
 .colors(d3.scale.linear()
     .domain([0,1,2,3,4,5...])
     .range([color0,color1,color2,color3,color4,color5...]))

现在 colorAccessor 将 return 值介于 0.0-1.0、2.0-3.0、4.0-5.0 之间，...并且线性比例会将它们映射到 color0-color1、color2-color3、颜色 4-颜色 5...

这有点棘手，您必须知道所有行值才能开始。

DC.js 每行热图色标

DC.js Heatmaps color scale per row

dc.js