Javascript 气泡贴图d3上重叠圆的工具提示

问题：如何向d3中有重叠圆圈的气泡图添加简单的var工具提示（悬停）

说明：下面的气泡图有两个重叠的圆圈，其大小根据两个不同年份的计数确定。我想创建一个工具提示，当我将鼠标分别悬停在圆圈上并重叠时，它会显示年份、计数和名称。将鼠标悬停在重叠的圆上时，我希望工具显示：

 year: 2010
 count: 25
 name: geoname
 year: 2015
 count: 100
 name: geoname

并且没有重叠对应圆的信息。这是一个简单的例子，可能有许多重叠的圆

//svg
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
//地图、投影
var projection=d3.geoMercator（）
.中心（[-123.1207，49.2827]）
.规模（30000）
.translate（[宽度/2，高度/2]）
//数据圈：
变量标记=[
{长：-123.107840443438391，lat:49.248610493457299，A组，年份：2010，计数：25，名称：“地理名称”}，
{长：-123.107840443438391，lat:49.248610493457299，B组，年份：2015，计数：100，名称：“地理名称”}，
];
变量url=”https://raw.githubusercontent.com/Bemrose/dat/master/dat.geojson";
//加载外部数据并启动
d3.json（url、函数（数据）{
//创建颜色比例
var color=d3.scaleOrdinal（）
.domain（[“A”、“B”、“C”]）
.范围（[“#fa7d0f”、“#0ffa4e”、“#0f6dfa”]）
//添加气泡计数的刻度
var count=d3.scaleLinear（）
.domain（[1100]）//数据中有什么
.range（[4,50]）//以像素为单位计数
//画地图
svg.append（“g”）
.selectAll（“路径”）
.数据（数据.特征）
.输入（）
.append（“路径”）
.attr（“填充”、“d0d6”）
.attr（“d”，d3.geoPath（）
.投影（投影）
)
.style（“笔划”，“#969999”）
.style（“不透明度”，.3）
//添加圆圈：
svg
.selectAll（“myCircles”）
.数据（标记）
.输入（）
.附加（“圆圈”）
.attr（“类”，函数（d）{返回d.group}）
.attr（“cx”，函数（d）{返回投影（[d.long，d.lat]）[0]}）
.attr（“cy”，函数（d）{返回投影（[d.long，d.lat]）[1]}）
.attr（“r”，函数（d）{返回计数（d.count）}）
.style（“填充”，函数（d）{返回颜色（d.group）}）
.attr（“笔划”，函数（d）{返回颜色（d.group）}）
.attr（“笔划宽度”，3）
.attr（“填充不透明度”，.4）
//此函数将更改选定和未选定圆的不透明度和计数
函数更新（）{
//对于每个复选框：
d3.选择全部（“.复选框”）。每个功能（d）{
cb=d3。选择（本）；
grp=cb.属性（“值”）
//如果复选框处于选中状态，则显示组
如果（cb.属性（“选中”））{
selectAll（“.”+grp.transition（）.duration（1000）.style（“不透明”，1.attr（“r”，函数（d）{return count（d.count）}）
//否则我就把它藏起来
}否则{
svg.selectAll（“.”+grp.transition（）.duration（1000）.style（“不透明”，0）.attr（“r”，0）
}
})
}
//当按钮更改时，我运行更新功能
d3.选择所有（“.checkbox”）。打开（“更改”，更新）；
//我从一开始就初始化了它
更新（）
})

2010
2015