如何在D3元素中添加链接

Question

因此，我尝试使用D3在径向日历上添加链接，其中日历上的每一天都包含一个链接，该链接将显示有关该特定日期的更多详细信息。我使用此日历作为基准：http://jsfiddle.net/dmann99/q63WN/

例如，假设我想在填写的日子（周末）添加一个"google.com"的链接。

// Draw faint arcs for each day (weekends filled, else outlined).
vis.selectAll("g.AllDays")
.data(dates)
.enter().append("svg:g")
    .attr("class", "AllDays")
    .attr("transform", "translate(" + r1 + "," + r1 + ")")
.append("svg:path")
    .attr("stroke", function(d, i) { return d3.hsl(0,0.25,0.75) })     
    .attr("fill", function(d, i) {
        return (d.getDay()==5||d.getDay()==6)?"#cccccc":"#ffffff";
     })
    .attr("d", arc)
;

有没有一种方法可以让我在填写的特定日期而不是整个日历上添加链接？

我试着添加这样的东西，但没有成功：

.on("click", function() { window.open("http://google.com"); });

感谢您的帮助。

Answer 1

指针事件样式属性似乎是这里的关键（即没有它就无法工作）

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

    .filter (function(d) { return d.getDay() ==5 || d.getDay() ==6; })
    .on("click", function() { window.open("http://google.com", "_blank"); })

需要css规则：

.WeekLine {
  pointer-events: none
}

当单击显示器边缘的周末节点时，它最初只处理上面的javascript更改，但.WeekLine圆圈正在拦截鼠标事件，以便在显示器内部进行单击。

http://jsfiddle.net/q63WN/5/

（所以指针事件仍然是一件需要处理的事情，我只是从错误的元素开始…）