如何在 Cal-heatmap 中的 d3 对象上添加 url/link

Question

作为一个d3和js的新手，或者只是一个普通的前端，我花了足够的时间基本上了解了如何Cal-heatmap works. I have a working version, but really want to make the tiny boxes on the calendar hyperlinks for extra functionality, and reading the source code was a complete disaster for me. I suppose I should add .attr("xlink:href", url) to some object as suggested here，但我真的想不通在哪里。有没有人做过类似的事情？我也不太明白我在初始化时指定的属性是如何传递给源代码的。感谢您的帮助！

Answer 1

这需要一点技巧。

绘制热图后您可以：

d3.selectAll('.graph-rect')
  .each(function(d){
    var a = d3.select( this.parentNode ) // get the parent of the rect (it's a g)
      .append("a") // append the link
      .attr("xlink:href","http://www.google.com")
      .attr("target", "_blank"); // set its link
    var rect = this;
    rect.remove(); // remove the rect
    a.insert(function(){return rect}); // and re-add it to the link
  });

工作example。

如何在 Cal-heatmap 中的 d3 对象上添加 url/link

How to add url/link on d3 objects in Cal-heatmap

d3.js

cal-heatmap