javascript - 在 D3 树中添加鼠标悬停时的文本

Question

我之前已将文本添加到 D3 树，但现在我在运行时创建节点，鼠标悬停上的文本不起作用。我知道该函数正在被调用，因为我在鼠标悬停时打印到控制台，它按预期工作。我猜测随着移动节点和静态文本的转换，我可以添加额外文本的方式发生变化。代码显示于:

jsfiddle.net/7L3A7/

我之前用来在鼠标悬停时添加文本的代码如下:

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");
            });

但这似乎不起作用，因为节点是在运行时添加的。

Answer 1

我在这个 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>鼠标移开时不会被删除