javascript - D3js 工具提示无法在 choropleth 上显示
问题描述
我想用toollip创建一个地图。当鼠标悬停在国家上时,工具提示应该会出现。在鼠标移出时,工具提示应该消失。我尝试了以下方法:但永远无法获得工具提示。
我是 d3js 的新手,如果有人可以让我知道我在这里做错了什么,那将非常感激。
svg.append('g')
.selectAll('path')
.data(world.features)
.enter()
.append('path')
// for each country
.attr('d', path)
.attr('class', 'country')
.style('fill', function(d){
if (d.properties.name in mapData){
return colorScale(mapData[d.properties.name][0]);
} else{
return 'grey'
}
});
var tooltip = svg.append("g");
// Create and customize tooltip
svg.selectAll(".country")
.on("mouseover", function(d) {
tooltip.call(
callout, function(d){
if (d.properties.name in mapData){
return "Country: " + d.properties.name +
"/\n/" +
"Game: " + selectedGame +
"/\n/" +
"Avg Rating: " + format(mapData[d.properties.name][0]) +
"/\n/" +
"Number of Users: " + format(mapData[d.properties.name][1])
} else{
return "Country: " + d.properties.name +
"/\n/" +
"Game: " + selectedGame +
"/\n/" +
"Avg Rating: N/A "
"/\n/" +
"Number of Users: N/A"
}
}
);
d3.select(this)
.attr("stroke", "red")
.raise();
})
.on("mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.lower();
});