d3.js - 将超链接添加到可折叠树上的节点文本

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，而不是group( g)元素。

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

我非常期待更好的解决方案，因此您的问题+1!