掘金贡献图（d3绘制github contributions图）

2023-10-01 07:52:05

前些日子，我无意中在 GitHub 上注意到一个“293 contributions in the last year”这样的东东，如下图所示，感觉很有趣，于是花了半天的时间查阅资料，现在就来和大家分享一下这个模块的具体实现方式。

实现这个模块需要借助第三方 js 插件，这里有鼎鼎大名的 d3。

首先，我们需要创建一个 HTML 文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="d3.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
</html>

接着，我们需要创建一个 CSS 文件，并在其中添加以下代码：

#graph {
  width: 600px;
  height: 400px;
}

.cell {
  fill: #eee;
  stroke: #ccc;
  stroke-width: 1px;
}

.cell-active {
  fill: #000;
}

最后，我们需要创建一个 JavaScript 文件，并在其中添加以下代码：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var svg = d3.select("#graph")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.count; })]);

  svg.selectAll(".cell")
      .data(data)
    .enter().append("rect")
      .attr("class", "cell")
      .attr("x", function(d) { return x(d.date); })
      .attr("y", function(d) { return y(d.count); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.count); })
      .on("mouseover", function(d) {
        d3.select(this)
          .classed("cell-active", true);
      })
      .on("mouseout", function(d) {
        d3.select(this)
          .classed("cell-active", false);
      });
});