Cal-Heatmap 仅连续显示 3 个月，再连续显示 3 个月，直到所有 12 个月

Question

大家好，我在我的项目中使用 d3js 和 cal-Heatmap 作为日历视图，我可以让示例正常工作。

它只提供verticalOrientation = false/true选项，但我的要求是我必须显示

horizontalOrientation (i.e verticalOrientation = false)

但我想要连续 3 个月，然后再连续 3 个月……直到所有 12 个月。请帮助我实现它。

输出目标：

Answer 1

如果我没理解错的话，你可以结合使用 subDomain 和 rowLimit:

  var cal = new CalHeatMap();
  cal.init({
    domain: "year",
    subDomain: "x_month",
    rowLimit: 3
  });

完整示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.css" />
  <script src="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.min.js"></script>
</head>

<body>
  <div id="cal-heatmap"></div>
  <script>
    var cal = new CalHeatMap();
    cal.init({
      domain: "year",
      subDomain: "x_month",
      rowLimit: 3
    });
  </script>
</body>

</html>

Cal-Heatmap 仅连续显示 3 个月，再连续显示 3 个月，直到所有 12 个月

Cal-Heatmap display only 3 months in row another 3 months another row till all 12 months

jquery

d3.js

cal-heatmap