Как добавить url/link на объекты d3 в Cal-heatmap

Question

Как новичок как для d3, так и для js, или просто для интерфейса в целом, я потратил достаточно времени, чтобы понять, как работает Cal-heatmap. У меня есть рабочая версия, но я действительно хочу сделать крошечные поля в гиперссылках календаря для дополнительной функциональности, и чтение исходного кода стало для меня полной катастрофой. Полагаю, я должен добавить .attr("xlink:href", url) к некоторому объекту, как предложено here, но я действительно не могу понять, где. Есть ли кто-нибудь, кто сделал что-то подобное? Также я не понимаю, как атрибуты, которые я указываю при инициализации, передаются в исходный код. Любая помощь приветствуется!

Answer 1

Это требует немного взлома.

После Heatmap черпает вы можете:

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.