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

Question

作为 d3 和 js 的新手，或者只是一般的前端，我花了足够的时间来基本了解 Cal-heatmap 的工作原理。我有一个工作版本，但真的想在日历超链接上制作小框以获得额外的功能，阅读源代码对我来说是一场彻底的灾难。我想我应该按照here 的建议将.attr("xlink:href", url) 添加到某个对象，但我真的不知道在哪里。有没有人做过类似的事情？另外，我也不太明白我在初始化时指定的属性是如何传递给源代码的。任何帮助表示赞赏！

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。