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

时间:2013-02-19 06:46:06

标签: d3.js

我想在collapsible tree example

中的节点文本上添加超链接

我该怎么做?

3 个答案:

答案 0 :(得分:5)

我是一个Javascript / svg / d3js noob,但我通过在文本上放置一个超链接的透明矩形来“解决”这个问题,这个解决方法可以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 styleadd .on("click", click) to the circle,而不是组(g)元素。

这样做有效,但缺点是可点击的矩形的大小与标签的文字不一致。

我真的很期待一个更好的解决方案,所以+1为你的问题!

答案 1 :(得分:5)

如果删除全局节点上的单击处理程序并附加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;
}

答案 2 :(得分:0)

我在节点上添加了另一行文字,其中包含一些关于链接的信息,如下所示:

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包含每个节点所需的数据。