Добавление текста в 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, который делает в основном то же самое, но добавляет текст при наведении курсора. Есть идеи?

Answer 1

Событие mouseover не сработает, если группа <g> не содержит элементов для включения мыши. Вы должны добавить что-то к группам, чтобы событие было вызвано при входе мыши.

Answer 2

Вы должны использовать .text (function (d) {return d.name}) вместо .text (d.name)