cal-heatmap

Question

我正在试用 cal-heatmap，我想提供一个简单的图例颜色数组供使用，而不必为每种颜色定义 CSS 类。

到目前为止，在我的测试中这似乎不可能？

例如，使用：

legendColors : ['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)'],

给我一个从第一种颜色到第二种颜色有 10 个等级的比例尺，忽略其余部分。

我是不是在文档中遗漏了一些简单的东西，或者这是不可能的？

我知道我可以创建 CSS 类，但我不想这样做 - 我需要动态的、数量可变的类别，以及动态创建的颜色。

Answer 1

我查看了 API 和源代码，但似乎不可能。想到两个想法：

一、事后修复：

 cal.init({
   range: 10,
   start: new Date(2000, 0, 1, 1),
   data: "datas-hours.json",
   onComplete: function() {
     setTimeout(function(){
       ['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)']
        .forEach(function(d,i){               
           d3.selectAll("rect.r" + i)
             .style("fill", d);
           });
        }, 10);
  }

我不确定为什么 setTimeout 是必要的，这会在颜色交换时产生奇怪的 "flash" 影响。示例 here.

另一个想法是写the styles on the fly：

var style = document.createElement('style');
style.type = 'text/css';
['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)']
  .forEach(function(d,i){
    style.innerHTML += ".q" + i + " {fill:" + d + "; background-color: " + d + "}";
  });
document.getElementsByTagName('head')[0].appendChild(style);

var cal = new CalHeatMap();
cal.init({
  range: 10,
  start: new Date(2000, 0, 1, 1),
  data: "datas-hours.json"
});

例子here.

不过我不确定我喜欢这两个选项中的任何一个。您最好分叉存储库，添加您想要的内容并提交拉取请求。向下看第 3278 行，用你的序号换掉那个色标。

cal-heatmap - legendColors 作为颜色值数组？

cal-heatmap - legendColors as array of color values?

d3.js