Hyperlink Hinzufügen von Text auf einem zusammenklappbaren Baum

Question

zum Knoten Ich mag Hyperlink auf dem Knotentext im collapsible tree example hinzuzufügen.

Wie kann ich das tun?

Answer 1

Ich bin ein Javascript/svg/d3js noob, aber ich „gelöst“ diese durch eine verlinkte transparentes Rechteck über den Text platzieren, diese Problemumgehung ist als bl.ock verfügbar.

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   
     ; 

Ich habe ein zusätzliche clickable style und add .on("click", click) to the circle anstelle der Gruppe (g) Element.

Dies funktioniert, hat aber den Nachteil, dass die Größe der klickbare rect nicht Größe mit dem Text des Etiketts.

Ich freue mich wirklich auf eine bessere Lösung, also +1 für Ihre Frage!

Answer 2

habe ich eine andere Textzeile zu dem Knoten mit einigen Informationen über den Link, wie folgt aus:

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

wo Pfad und beschriften Sie die Daten, die Sie für jeden Knoten wollen haben.

Answer 3

Wenn Sie den Click-Handler auf dem globalen Knoten entfernen und legen 2 verschiedenen Klick-Handler:

• One für den Kreis
• One für den Text

können Sie ein anderes Verhalten haben wenn Sie auf den Text klicken. Wenn Sie dieses Element ein wenig ansteuern, kann es genau wie ein Hyperlink aussehen.

überprüfen meine Geige hier aus: http://jsfiddle.net/empie/EX83X/

Click Handlers

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

und CSS:

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

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