javascript - 工具提示 - d3.js 的鼠标悬停位置错误
问题描述
我是 d3js 的新手,并尝试在条形图中使用工具提示功能。通常鼠标指向栏,它会在鼠标旁边弹出。但是,弹出的不是鼠标跟随的。它转到右上角。我尝试微调函数 mousemove().style,但结果是一样的。这是我的代码如下:
// 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');
}
})
这是我的参考: https ://blockbuilder.org/1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61
解决方案
推荐阅读
- python - 在 dag 中增加或减少 ts_nodash 秒数
- javascript - JavaScript 中的 find() 与 map()
- arrays - 如何使用指针算法操作二维数组中的列和行
- amazon-web-services - AWS Amplify + bitbucket 部署问题
- python - 有没有更好的方法来获取未知长度列表中的第 n 个元素?
- python - 我在 python 中的代码有什么问题?
- reactjs - 刷新页面我得到 TypeError: Cannot read property 'Location' of undefined
- reactjs - 避免更新未安装的组件
- android - 将数据从回收站视图转换为字符串 onClick
- mysql - MySQL 根据不同的表插入记录