マウスオーバー時にSVGにテキストを追加すると、d3.jsが機能しない

2020-03-28 javascript d3.js svg

線の入ったグラフがあり、線の上にマウスを置くと、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からインスピレーションを得ました。これは基本的に同じことを行っていますが、ホバーするとテキストが追加されます。何か案が ?

Answers

.text(function(d){return d.name})を使用する必要があります .text(d.name)の代わりに

グループ<g>にマウスをオンにするための要素が含まれていない場合、 mouseoverイベントはトリガーされません。マウスが入るとイベントがトリガーされるように、グループに何かを追加する必要があります。

Related