SOURCE

// 创建 SVG 元素


//添加一个圆圈作为示例
d3.select(svg).append("circle")
 .attr("cx", 100)
 .attr("cy", 100)
 .attr("r", 50)
 .style("fill", "lightblue");

// 创建 tooltip 元素
var tooltip = d3.select('body').append('div')
 .style('position', 'absolute')
 .style('padding', '8px')
 .style('background', '#f0f0f0')
 .style('border', '1px solid #808080')
// 隐藏初始状态
tooltip.style('opacity', 0);

// 添加鼠标事件监听器显示/隐藏提示框
d3.select(svg).selectAll('circle').on('mouseenter', function() {
 var circle = d3.select(this);
 var cx = +circle.attr("cx");
 var cy = +circle.attr("cy");
 
 tooltip.html("<strong>圆心：</strong>(" + cx + ", " + cy + ")" + '<br><a href="#" id="tipLink">查看详细信息</a>');

 // 显示提示框（透明度设为1.0）
 tooltip.transition()
 .duration(200)
 .style("opacity", 1.0);

 // 点击链接时触发相应操作 
 document.getElementById('tipLink').addEventListener('click', function(e) {
 e.preventDefault();
 alert('您点击了链接！'); // 可以根据实际需求进行相应操作
 });
})
.on('mousemove', function() {
 // 让提示框跟随鼠标移动（位置根据需要进行调整）
 tooltip.style(
 'left',
 d3.event.pageX - (tooltip.node().offsetWidth /2) +"px"
 )
 tooltip.style(
 'top',
 d3.event.pageY - (tooltip.node().offsetHeight+20)+"px"
 )
})
.on(`mouseleave`, function(){
 // 移出时隐藏提示框（透明度设为0）
 tooltip.transition()
 .duration(300)
 .style(`opacity`, 0);
});

<svg id="svg" width="400" height="800" />