html里平移英文,使用D3缩放和平移时，如何翻译HTML元素和SVG元素

我正在使用D3在SVG画布上绘制一堆元素，同时也在html中使用工具提示。然后，我使用zoom允许在画布上平移/缩放。我希望工具提示跟随圆圈的位置。我似乎无法弄清楚如何计算。

相关代码

const svg = select('svg');

const width = +svg.attr('width');

const height = +svg.attr('height');

// Define the div for the tooltip

const tooltip = select('body')

.append('div')

.attr('class', 'tooltip')

.style('opacity', 0);

const g = svg.append('g')

.attr('width', width)

.attr('height', height);

const zoomHandler = zoom()

.scaleExtent([1 / 10, 100])

.on('zoom', () => {

g.attr('transform', event.transform);

const { x, y, k } = event.transform;

tooltip.attr('data-offset-x', x);

tooltip.attr('data-offset-y', y);

tooltip.attr('data-offset-k', k);

});

zoomHandler(svg);

let overTooltip = false;

const moveTooltip = (d) => {

if (!overTooltip) return;

tooltip.transition()

.duration(100)

.style('opacity', 0.9);

const x = parseInt(tooltip.attr('data-offset-x') || 0, 10);

const y = parseInt(tooltip.attr('data-offset-y') || 0, 10);

const k = parseInt(tooltip.attr('data-offset-k') || 0, 10);

tooltip.html(d.id)

.style('left', `${(d.x / k + x)}px`)

.style('top', `${(d.y / k + y - radius(d) - 5)}px`);

};

const node = g.append('g')

.selectAll('circle')

.data(nodes)

.enter()

.append('circle')

.attr('r', radius)

.attr('fill', d => (colors[d.type]))

.on('mouseover', (d) => {

overTooltip = true;

moveTooltip(d);

})

.on('mousemove', moveTooltip)

.on('mouseout', () => {

overTooltip = false;

tooltip.transition()

.duration(100)

.style('opacity', 0);

})