javascript - 在鼠标悬停时在 svg 中添加文本不起作用 d3.js

Question

我有一个带有线条的图表，当我将鼠标悬停在线条上时，我想在 svg 中显示一个文本。这是代码：

let lines = svg.append("g").attr("class", "lines");


        lines
            .selectAll(".line-group")
            .data(data)
            .enter()
            .append("g")
            .attr("class", "line-group")
            .on("mouseover", function (d, i) {
                console.log(d.name)
                svg
                    .append("text").attr("class", "title-text")
                    .style("fill", color(i))
                    .text(d.name + "efzeiufzihefizeifiu")
                    .attr("text-anchor", "middle")
                    .attr("x", 200)
                    .attr("y", 30);
            })
            .on("mouseout", function (d) {
                svg.select(".title-text").remove();
            })

我没有错误，并且鼠标悬停工作正常，因为我可以在控制台中看到 d.name 的值，但是在 svg 中没有添加文本属性。我的灵感来自：https ://codesandbox.io/s/multi-line-chart-example-wrxvs ，它的作用基本相同，但它在悬停时添加了文本。任何想法 ？

标签： javascriptd3.jssvg

Answer 1

如果组不包含任何鼠标要打开的元素，mouseover则不会触发该事件。<g>您必须在组中附加一些内容，以便在鼠标进入后触发事件。