README

另一个用于表示时间序列数据的d3.js热图。受GitHub贡献图表的启发

受杰出的DKirwan的日历热图的启发。

重新设计以适用于d3.js v5 + ES6类样式。

屏幕截图

年度概览。

月度概览。

特性与规格

• 热图
• 直方图
• 标签和刻度
• 自由时间粒度
• 清洁编码... (告诉我)
• 易于通过选项和概览调整
• 完全本地化（仅使用 moment.format()）

依赖关系

• d3.js v5
• moment.js

用法

1. 添加 d3.js 和 moment.js

2. 包含 activity-heatmap.js <script src="path/to/activity-heatmap.js"></script> 或 <script src="path/to/activity-heatmap.min.js"></script>

3. 添加工具提示样式

.heatmap-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 5px 9px;
  color: #bbbbbb;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 3px;
  text-align: center;
}

1. 添加一些容器 <div id="my-heatmap"></div>

2. 用一些数据创建热图

  d3.json("url/to/my-data.json").then(function(data) {
    // do your AJAX stuff here
    data.forEach(function(d) {
      // final data items should have at least a JS Date date...
      d.date = new Date(d.timestamp);
      // ...and a Number value.
      d.value = +d.value;
    });

    const map = new ActivityHeatmap(data, 'yearly', '#my-heatmap');
    map.render();
  });

选项

第二个参数是概览提示，将调整选项。您可以实例化后覆盖调整后的选项。

第三个参数可以是一个广泛的选项对象。

const options = {
  selector: '#my-heatmap'
};
const map = new ActivityHeatmap(data, 'yearly', options);
map.options.period.from = new Date('2020-01-01');

最终计算将在渲染时完成。

以下是一些常见选项

const options = {
  debug: false,
  selector: "#monthly",
  legend: true,
  histogram: true,
  frame: true,
  colors: {
    separator: "#AAAAAA",
    frame: "#AAAAAA",
    scale: ["#D8E6E7", "#218380"]
  }
};

内联渲染()

render() 可以不带参数使用，或者您可以传递自己的 SVG 对象。

...
const heatmap = map.render(mySvg, 100, 50);
...

它返回一个包含整个热图的 SVG 组。

示例

打开 examples/ex1.html。

注意：如果您将 ex1.html 作为本地文件打开，您可能需要绕过 CORS（使用 FF： about:config > privacy.file_unique_origin => false）。