折りたたみ可能なツリーのノードテキストにハイパーリンクを追加

Question

collapsible tree exampleのノードテキストにハイパーリンクを追加します。

どうすればいいですか？

Answer 1

IはJavascript/SVG/d3jsのnoobのだが、私は、テキストの上にハイパーリンクされた透明の四角形を配置することで、これを "解決"、この回避策がbl.ockとして提供されています：。

nodeEnter 
    .append("a") 
    .attr("xlink:href", function (d) { return "http://www.example.com/flare/" + d.id; }) 
    .append("rect") 
     .attr("class", "clickable") 
     .attr("y", -6) 
     .attr("x", function (d) { return d.children || d._children ? -60 : 10; }) 
     .attr("width", 50) //2*4.5) 
     .attr("height", 12) 
     .style("fill", "lightsteelblue") 
     .style("fill-opacity", .3)  // set to 1e-6 to make transparent   
     ; 

は、私が追加（ g）要素の代わりに clickable styleと add .on("click", click) to the circleを追加してください。

これは機能しますが、クリック可能な矩形のサイズがラベルのテキストのサイズにならないという欠点があります。

私は本当に良いソリューションを楽しみにしていますので、あなたの質問に+1してください！

Answer 2

私はこのようなリンクに関するいくつかの情報、とノードにテキストの別の行を追加しました：パスとラベルを使用して、各ノードのために必要なデータを持っている

nodeEnter.append("a") 
    .attr("xlink:href", function(d) { return d.path; }) 
    .append("text") 
    .attr("class", "clickable") 
    .attr("y", 16) 
    .attr("x", function (d) { return d.children || d._children ? -10 : 10; }) 
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
    .text(function(d) { return d.label; }) 

。

Answer 3

あなたがグローバル・ノード上のクリックハンドラを削除し、2つの異なるクリックハンドラを添付する場合は、次のテキスト

ため

• サークルの一つ
• 一つをあなたは異なる動作を持つことができますテキストをクリックするとその要素のスタイルを少し変えると、ハイパーリンクと同じように見えます。

  ここに私のバイオリンをチェックアウト： http://jsfiddle.net/empie/EX83X/

  クリックハンドラ

  var nodeEnter = node.enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); 
  
       nodeEnter.append("circle") 
        .attr("r", 1e-6) 
        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }).on("click", click);; 
  
       nodeEnter.append("text") 
        .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
        .attr("dy", ".35em") 
        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
        .text(function(d) { return d.name; }) 
        .style("fill-opacity", 1e-6) 
       .attr("class", "hyper").on("click", clack); 
  
      function clack(d) { 
       alert(d.name); 
      } 
  

  とCSS：

  .hyper { 
      color: blue; 
      text-decoration: underline; 
  } 
  
  .hyper:hover { 
      color: yellow; 
      text-decoration: none; 
  }