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

Question

折りたたみ可能なツリーの例のノード テキストにハイパーリンクを追加したいと思います。

これどうやってするの？

Answer 1

私はJavascript / svg / d3js初心者ですが、テキストの上にハイパーリンクされた透明な長方形を配置することでこれを「解決」しました。この回避策は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          
      ;

追加のclickableスタイルを追加.on("click", click)し、グループ ( g) 要素の代わりに円に追加しました。

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

より良い解決策を本当に楽しみにしているので、質問に+1してください!

Answer 2

グローバル ノードのクリック ハンドラーを削除し、2 つの異なるクリック ハンドラーをアタッチすると、次のようになります。

• サークル用の 1 つ
• テキスト用の 1 つ

テキストをクリックすると、異なる動作をすることができます。その要素のスタイルを少し変えると、まさにハイパーリンクのように見えます。

ここで私のフィドルをチェックしてください： 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;
}

Answer 3

次のように、リンクに関する情報を含む別のテキスト行をノードに追加しました。

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; })

path と label には、各ノードに必要なデータが含まれています。