我之前已将文本添加到 D3 树,但现在我在运行时创建节点,鼠标悬停上的文本不起作用。我知道该函数正在被调用,因为我在鼠标悬停时打印到控制台,它按预期工作。我猜测随着移动节点和静态文本的转换,我可以添加额外文本的方式发生变化。代码显示于:
我之前用来在鼠标悬停时添加文本的代码如下:
node.on("mouseover", function (d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
var info = g.insert('text')
.attr("x", function (d) {
return (d.parent.px);
})
.attr("y", function (d) {
return (d.parent.py);
})
.text(function (d) {
return "asdfadfg";
});
console.log("adfhadfh");
});
但这似乎不起作用,因为节点是在运行时添加的。
最佳答案
我在这个 fiddle 中做了一些更改: http://jsfiddle.net/henbox/bGR8N/1/
首先,您添加了 <text>
元素至<circle>
SVG 元素使您的 HTML 看起来像:
<circle class="node" r="4" cx="235" cy="480">
<text x="235" y="240">Info on FOO</text>
</circle>
相反,您应该将文本和 SVG 形状添加到单独的 g
中元素,使用类似:
var gelement = node.enter().append("g");
gelement.append("circle")...
所以你的 HTML 看起来像:
<g>
<circle class="node" r="4" cx="268.57142857142856" cy="480"></circle>
<text x="268.57142857142856" y="480">Info on FOO</text>
</g>
在使用 link.enter().insert("path", ".g.node")
创建链接时,您还需要考虑该新结构。而不仅仅是link.enter().insert("path", ".node")
其次,此更改意味着鼠标悬停文本出现在父级级别,我认为这不是您想要的,所以我更改了 x
可从 d.x
访问而不是(d.parent.px)
,并对 y
执行相同操作
剩下的明显问题是 <text>
鼠标移开时不会被删除
关于javascript - 在 D3 树中添加鼠标悬停时的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24740891/