Dodaj hiperłącze do tekstu węzła na składanym drzewie

Question

Chciałbym dodać hiperłącze do tekstu węzła w collapsible tree example.

Jak mogę to zrobić?

Answer 1

jestem noob JavaScript/SVG/d3js, ale „rozwiązany” to poprzez umieszczenie hiperłącza przezroczysty prostokąt nad tekstem, to rozwiązanie jest dostępne jako 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   
     ; 

Dodałem dodatkowy element clickable style i add .on("click", click) to the circle zamiast elementu grupy (g).

Działa to, ale ma tę wadę, że rozmiar klikalnego recta nie ma rozmiaru z tekstem etykiety.

Naprawdę nie mogę się doczekać lepszego rozwiązania, więc daj +1 na Twoje pytanie!

Answer 2

dodałem kolejną linię tekstu do węzła z pewną informacją na temat związku, podobnie jak to:

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

gdzie ścieżka i etykieta posiada dane, które chcesz dla każdego węzła.

Answer 3

Jeśli usuniesz obsługi kliknij na węźle globalnej i dołączyć 2 różne kliknięcia teleskopowe:

• jeden dla okręgu
• jeden dla tekstu

Można mieć różne zachowanie po kliknięciu tekstu. Jeśli nieco stylujesz ten element, może on wyglądać dokładnie jak hiperlink.

Sprawdź moje skrzypce tutaj: http://jsfiddle.net/empie/EX83X/

Kliknij wysuwane

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

i CSS:

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

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