使用event.pageX将图表中的对象放置到鼠标坐标

Question

我很难在d3图表中将对象定位到鼠标坐标上。

var svg = d3.select(#myChart).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

const tl = svg.append('line').attr("style", "position: absolute;");

 .on("mouseover", function(d) {
                 tl.attr('stroke', 'black')
                .attr('x1', (d3.event.pageX + 5) + "px" )
                .attr('x2',(d3.event.pageX + 5) + "px")
                .attr('y1', 0 )
                .attr('y2', height );

        })

当图表向左对齐时，我可以看到线条在鼠标左侧像50px一样（就像鼠标X + 40）。当图表位于右侧时，该线甚至不可见。我需要使该行始终位于XMouse位置，并且0为常数（垂直线）。