我对 D3 非常陌生，正在尝试制作一个简单的交互条形图。用于此的数据是一个简短的 csv，其中包含书名、平均评分和评论数量。到目前为止，我已经成功地创建了带有鼠标悬停突出显示功能的图表。但是，我真正想要的是当您将鼠标悬停在显示平均评分和评论数量的每个栏上时出现一个工具提示。
我目前的代码如下所示。我尝试了几种不同的方法将工具提示添加到 onMouseOver 函数中，但每次都完全消除了整个图形。
我已针对“D3.js 鼠标悬停事件在条形图中不起作用”问题进行了编辑；然而，现在只有标题出现了。
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
fill: green;
}
.highlight {
fill: red;
}
.title {
fill: black;
font-weight: bold;
}
</style>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<title> Animated bar chart </title>
</head>
<body>
<svg width = "1000" height = "500"></svg>
<script>
var svg = d3.select("svg"),
margin = 225, width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 200).attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Average Rating of Most Reviewed Books")
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.csv("toprating.csv", function(error, data) {
if (error) {
throw error;
}
var tooltip = d3.select("svg")
.attr('class', 'd3-tip')
.style("position", "absolute")
.style("visibility", "hidden")
.text("Average Rating: " + d.avg_rating);
x.domain(data.map(function(d) { return d.title; }));
y.domain([0, d3.max(data, function(d) { return d.avg_rating; })]);
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
g.append("g")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("font-size", "18px")
.attr("stroke", "black")
.text("Average Rating");
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.on("mouseover", tip.show)
.on("mouseout", tip.hide)
.attr("x", function(d) { return x(d.title); })
.attr("y", function(d) { return y(d.avg_rating); })
.attr("width", x.bandwidth()).transition()
.ease(d3.easeLinear).duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.avg_rating); });
});
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.avg_rating) ; })
.attr("height", function(d) { return height - y(d.avg_rating); });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.title);
})
.attr('y', function() {
return y(d.value) ;
})
}
function onMouseOut(d, i) {
d3.select(this)
.attr('class', 'bar');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.avg_rating); })
.attr("height", function(d) { return height - y(d.avg_rating); });
d3.selectAll('.val')
.remove()
}
</script>
</body>
</html>