Adding text in svg on mouseover not working d3.js

Question

I have a chart with lines in it, and when I mouseover a line I want to display a text in the svg. Here is the code :

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

I have no error, and the mouseover is working fine as I can see in the console the value of d.name, however there is no text attribute adding in the svg. I inspired myself from : https://codesandbox.io/s/multi-line-chart-example-wrxvs, which is doing basically the same thing, but it adds the text when hovering. Any idea ?

You can use display:block; and display:none property. instead of removing and adding class. Also please read this example: https://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — Süleyman Acar, Mar 27 '20 at 19:07

score 0 · Answer 1 · answered Mar 29 '20 at 05:17

0

The mouseover event will not trigger if the group <g> does not contain any element for the mouse to be on. You must append something to the groups so that the event will be triggered once the mouse enters.

answered Mar 29 '20 at 05:17

Ahmad

12,336
6
48
88

score -1 · Answer 2 · answered Mar 29 '20 at 05:01

-1

you have to use .text(function(d){return d.name}) instead of .text(d.name)

answered Mar 29 '20 at 05:01

Soonk

332
2
14

That is not the reason. – Ahmad Mar 29 '20 at 05:18

Adding text in svg on mouseover not working d3.js

2 Answers2