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サークルはclのマウスイベントをインターセプトしていましたディスプレイの内部には何も表示されません。

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

（そのポインタイベントは、私はちょうど...で開始するように間違った要素に焦点を当て、まだいじるためのものだった）