Javascript 工具提示-d3.js的鼠标位置错误

我是d3js的新手，尝试在条形图中使用工具提示功能。正常情况下，鼠标指向工具栏，它会弹出鼠标旁边的窗口。但是，弹出窗口不会跟随鼠标。它在右上角。我尝试对mousemove（）函数进行微调，但结果是一样的。以下是我的代码：

// set the dimensions and margins of the graph

var margin = { top: 10, right: 30, bottom: 100, left: 50 }
var width = 1000 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom;

var dataUrl = "https://raw.githubusercontent.com/yushinglui/IV/main/course_distance_v2.csv"

//fetch the data
d3.csv(dataUrl)
    .then((data) => {

        // append the svg object to the body of the page
        var svg = d3.select("#graph-1")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // X axis
        var x = d3.scaleBand()
            .range([0, width])
            .domain(data.map(function (d) { return d.CourseCode; }))
            .padding(0.2);
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-90)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleLinear()
            .domain([0, 55])
            .range([height, 0])
        svg.append("g")
            .call(d3.axisLeft(y));

        // Bars
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function (d) { return x(d.CourseCode); })
            .attr("width", x.bandwidth())
            .attr("fill", "#b3a269")
            // no bar at the beginning thus:
            .attr("height", function (d) { return height - y(0); }) // always equal to 0
            .attr("y", function (d) { return y(0); })
            .on('mouseover', mouseover)
            .on('mousemove', mousemove)
            .on('mouseout', mouseout);

        // Animation
        svg.selectAll("rect")
            .transition()
            .duration(800)
            .attr("y", function (d) { return y(d.AverageDistance); })
            .attr("height", function (d) { return height - y(d.AverageDistance); })
            .delay(function (d, i) { console.log(i); return (i * 10) })

        //axis labels

        svg.append('text')
            .attr('x', -(height / 2))
            .attr('y', width - 950)
            .attr('transform', 'rotate(-90)')
            .attr('text-anchor', 'middle')
            .text('Average Distance (Miles)');

        svg.append('text')
            .attr('x', 450)
            .attr('y', 460)
            .attr('transform', 'rotate()')
            .attr('text-anchor', 'middle')
            .text('Course Code');
         
        //text labels on bars

        svg.selectAll(null)
            .data(data)
            .enter()
            .append("text")
            .text(function (d) { return d.AverageDistance; })

            .attr("x", function (d) { return x(d.CourseCode) + 5; })
            .attr("y", function (d) { console.log(d); return y(d.AverageDistance) - 2; })


            .attr("font-family", "sans-serif")
            .attr("font-size", "10px")
            .attr("fill", "black")
            .attr("text-anchor", "middle");
            
        //tooltip
        var div = d3.select('#graph-1').append('div')
            .attr('class', 'tooltip')
            .style('display', 'none');
        function mouseover() {
            div.style('display', 'inline');
        }
        function mousemove() {
            var d = d3.select(this).data()[0]
            div
                .html(d.CourseName + '<hr/>' + d.CourseCode)
                .style('left', (d3.event.pageX - 34) + 'px')
                .style('top', (d3.event.pageY - 12) + 'px');
        }
        function mouseout() {
            div.style('display', 'none');
        }
     
    })

//设置图形的尺寸和边距
var margin={顶部：10，右侧：30，底部：100，左侧：50}
变量宽度=1000-margin.left-margin.right
变量高度=500-margin.top-margin.bottom；
var dataUrl=”https://raw.githubusercontent.com/yushinglui/IV/main/course_distance_v2.csv"
//获取数据
d3.csv（数据URL）
。然后（（数据）=>{
//将svg对象附加到页面主体
var svg=d3。选择（“图1”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//X轴
var x=d3.scaleBand（）
.范围（[0，宽度]）
.domain（data.map（函数（d）{return d.CourseCode；}））
.填充（0.2）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.attr（“变换”、“平移（-10,0）旋转（-90）”）
.样式（“文本锚定”、“结束”）；
//Y轴
变量y=d3.scaleLinear（）
.domain（[0，55]）
.范围（[高度，0]）
svg.append（“g”）
.调用（d3.左（y））；
//栅栏
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{返回x（d.CourseCode）；}）
.attr（“宽度”，x.带宽（））
.attr（“填充”、“b3a269”）
//开始时没有酒吧，因此：
.attr（“height”，函数（d）{返回高度-y（0）；}）//始终等于0
.attr（“y”，函数（d）{返回y（0）；}）
.on（'mouseover'，mouseover）
.on（'mousemove'，mousemove）
.on（'mouseout'，mouseout）；
//动画
svg.selectAll（“rect”）
.transition（）
.持续时间（800）
.attr（“y”，函数（d）{返回y（d.AverageDistance）；}）
.attr（“高度”，函数（d）{返回高度-y（d.AverageDistance）；}）
.delay（函数（d，i）{console.log（i）；return（i*10）}）
//轴标签
append（'text'）
.attr（'x'，-（高度/2））
.attr（'y'，宽度-950）
.attr（'transform'、'rotate（-90'））
.attr（'text-anchor'，'middle'）
.text（“平均距离（英里）”；
append（'text'）
.attr（'x'，450）
.attr（'y'，460）
.attr（'transform'，'rotate（）'））
.attr（'text-anchor'，'middle'）
.文本（“课程代码”）；
//条形图上的文本标签
svg.selectAll（空）
.数据（数据）
.输入（）
.append（“文本”）
.text（函数（d）{返回d.AverageDistance；}）
.attr（“x”，函数（d）{返回x（d.CourseCode）+5；}）
.attr（“y”，函数（d）{console.log（d）；返回y（d.AverageDistance）-2；}）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“10px”）
.attr（“填充”、“黑色”）
.attr（“文本锚定”、“中间”）；
//工具提示
var div=d3。选择（'#graph-1'）。追加（'div'））
.attr（'类'，'工具提示'）
.style（“显示”、“无”）；
函数mouseover（）{
div.style（'display'，'inline'）；
}
函数mousemove（）{
var d=d3.select（this）.data（）[0]
div
.html（d.CourseName+'
'+d.CourseCode）
.style（'left'，（d3.event.pageX-34）+'px'）
.style（'top'，（d3.event.pageY-12）+'px'）；
}
函数mouseout（）{
div.style（'display'，'none'）；
}
})

以下是我的参考资料：