热力图dc.js - 手动提供颜色范围

Question

热力图dc.js - 手动提供颜色范围

javascriptd3.jschartsheatmapdc.js

3

我不确定如何做这个。我正在开发一个热力图 dc.js。我想手动设置颜色范围。例如，

var chart = dc.heatMap('#heatmapID');

chart
    .width(690)  //850
    .height(400)
    .margins({top: 10, right: 0, bottom: 50, left: 70})
    .dimension(dimension)
    .group(group)
    .keyAccessor(function(d) { return d.key[0]; })
    .valueAccessor(function(d) { return d.key[1]; })
    .colorAccessor(function(d) {return d.value.rate;});
chart.data(grouphelper.dataAccessor(dimension)); 
chart.colors(['#30d074', '#f3cb2c', '#ffa85c', '#ff604e']) 
    .calculateColorDomain();

上面的代码可以运行，但是它自动根据最小值和最大值数据设置颜色(我猜测)。对于chart.colors(...)，我想手动设置一个范围，但是当我尝试应用一个返回函数时，例如，

 //Outside of the chart function
 var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];
 function colorHeatMap() { 
  return d3.scale.threshold().domain([0.02,0.06,0.23]).range(colors);   }

 //now apply colorHeatMap function into the .color function.
 chart.colors(colorHeatMap()) .calculateColorDomain();

我收到了一个“_colors.domain 不是函数”的错误。当我移除 .calculateColorDomain() 后，热力图显示所有黑色方块。我的目标是手动设置 4 种颜色的范围。这种方法在 dc 行图表中效果很好，但我无法弄清楚如何在热力图中实现。

- timJIN520

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- incredi_imp · Accepted Answer

你不能把一个数组colors传递给chart.colors()函数；你必须传递一个d3颜色比例尺对象。这就是为什么当你删除calculateColorDomain()时，你的热图显示所有黑盒子的原因。

我遇到了类似的问题，我的解决方案是创建一个colorDomain数组，并使用它来访问颜色。如果你知道要分配给每种颜色的值，那么很简单：只需按那个顺序将值放在一个数组中即可。

var colorsDomain = [0.02, 0.06, 0.23];
var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];

chart.colors(d3.scaleQuantize().domain([0, colors.length - 1]).range(colors))
       .colorAccessor(d => colorsDomain.indexOf(d.value.rate))

看起来您可能正在使用d3 v3或更低版本，此时您应该在颜色函数中使用d3.scale.quanitze()而不是d3.scaleQuantize()。希望能对您有所帮助！