我对 d3 的一切都很陌生，并试图根据书评数据制作一个简单的交互式条形图，其中 x 轴为标题，y 轴为平均评分。我希望当您将鼠标悬停在每个栏上时出现一个工具提示，告诉您该书的总评论数。我已经能够显示工具提示，但无法弄清楚如何让它为每个栏显示不同的内容。现在它只为每个栏显示相同的文本。
到目前为止，这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
fill: red;
}
.title {
fill: black;
font-weight: bold;
}
.myTooltip {
position: absolute;
text-align: left;
width: 80px;
height: auto;
min-height: 20px;
padding: 2px;
font: 12px sans-serif;
background-color: rgb(255, 255, 255);
border: 2px solid rgb(100, 161, 209);
color: #5E99BD;
border-radius: 8px 8px 8px 8px;
pointer-events: none;
padding: 11px;
}
.myTooltip:before {
box-sizing: border-box;
display: inline;
font-size: 18px;
width: 100%;
line-height: 1;
color: rgb(100, 161, 209);
content: "\25BC";
position: absolute;
text-align: center;
top: 100%;
left: -2px;
}
</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 tooplTipDiv = d3.select("body").append("div")
.attr("id", "myTooltip")
.style("opacity", 0);
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;
}
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")
.attr("class","tooltip")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.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){
var tooltipDiv = d3.select("#myTooltip");
tooltipDiv.transition()
.duration(200)
.style("opacity", 1);
tooltipDiv.html("Something pls")
.style("cursor", "pointer")
.style("top", function(d){
return d3.event.pageY - this.offsetHeight - 17 + "px"
})
.style("color", "#333333");
}
function onMouseOut(d){
var tooltipDiv = d3.select("#myTooltip");
tooltipDiv.transition()
.duration(500)
.style("opacity", 0);
}
</script>
</body>
</html>
这里还有我的数据集供参考：
title,avg_rating,num_rating,author,isbn
Twilight #1,3.59,4597666,Stephenie Meyer,0316015849
The Hobbit or There and Back Again,4.27,2530894,J.R.R. Tolkien,0618260307
The Catcher in the Rye,3.80,2457092,J.D. Salinger,0316769177
Angels & Demons,3.89,2418736,Dan Brown,1416524797
Harry Potter #3,4.56,2339585,J.K. Rowling/Mary GrandPré,043965548X
Harry Potter #2,4.42,2293963,J.K. Rowling/Mary GrandPré,0439064864
Harry Potter #5,4.49,2153167,J.K. Rowling/Mary GrandPré,0439358078
The Lord of the Rings #1,4.36,2128944,J.R.R. Tolkien,0618346252
Animal Farm,3.98,2111750,George Orwell,0452284244
Harry Potter #6,3.93,2095690,J.K. Rowling/Mary GrandPré,0439785960
非常感谢任何提示和帮助。