添加超链接到可折叠树上的节点文本
答
我是一个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为您的问题!
答
我加了文字的另一行到节点有关的链接的一些信息,比如:
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; })
其中,路径和标签都希望为每个节点的数据。
答
如果您删除全局节点上单击处理和连接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;
}
已经有一个点击处理函数对每个节点,你为什么不只是用它来执行你想用超链接执行的任何操作? – 2013-02-19 07:09:48
好吧,点击处理程序连接到示例中的圆圈,并且(afaik)无法将点击处理程序添加到文本元素,所以这真是一个有效的问题。事实上,我无法弄清楚如何做到这一点。现在,我用一个'click'处理程序绘制第二个元素,重定向 – Marijn 2013-02-22 10:53:01
并且圆上的点击处理程序被附加到展开/折叠,我们不想破坏它。 – Marijn 2013-02-22 11:03:22