添加超链接到可折叠树上的节点文本

Question

我想在collapsible tree example的节点文本上添加超链接。

我该怎么做？

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 style和add .on("click", click) to the circle而不是组（g）元素。

这可行，但缺点是可点击矩形的大小不与标签的文本大小。

我真的很期待更好的解决方案，所以+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; 
}