Animation 在D3 js中将SVG坐标转换为页面坐标

我试图显示一个动画工具提示，每1秒改变一次位置，用于多个图形

var tooltip = d3.select("body")
        .append("div")
        .attr("id", "tooltip")
        .attr("class", "tooltip");

由于这是一个div，translate将无法使用它。所以，我尝试这样翻译，使用svg坐标

tooltip.html("Tooltip")
            .style("left", x(currentTime) + "px")
            .style("top", height + "px");

但它将此作为页面坐标值

如何将SVG坐标转换为页面坐标？

---

或者是否有其他方法将工具提示创建为SVG元素？

假设您的

div

工具提示是绝对位置，您的“页面”坐标就是

SVG

元素的位置加上事物在SVG元素中的位置

下面是一个快速示例（鼠标悬停在圆圈上）：

这是我的工具提示
var json=[
{x:Math.random（）*300，y:Math.random（）*300}，
{x:Math.random（）*300，y:Math.random（）*300}，
{x:Math.random（）*300，y:Math.random（）*300}
];
var svg=d3.select（'svg'）；
svg
.selectAll（'圆圈'）
.data（json）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d）{return d.x}）
.attr（'cy'，函数（d）{返回d.y}）
.attr（'r'，30）
.style（'填充'，'红色'）
.on（'mouseover'，函数（d）{
var svgPos=svg.node（）.getBoundingClientRect（）；
d3.选择（“#工具提示”）
.style（'left'，svgPos.left+d.x+'px'）
.style（'top'，svgPos.top+d.y+'px'）；
})
您可以考虑使用输入、更新、退出模式编写div，假设数据每秒出现。