如何通过top/left计算div的right/bottom定位值（D3.js场景）

当前通过D3.js监听鼠标事件的clientX/clientY坐标，经转换后为绝对定位的Tooltip设置top和left属性实现跟随。现在希望通过编程计算，改用right和bottom属性让Tooltip处于完全相同的位置，是否可行？

可行方案 #

当然可以实现，核心是基于父容器尺寸、Tooltip自身尺寸，结合原屏幕坐标进行反向计算。

计算逻辑 #

要通过right和bottom定位到相同位置，需要获取以下关键尺寸：

• 父容器（#viz）的实时渲染宽度和高度
• Tooltip元素自身的实时渲染宽度和高度
• 鼠标对应的屏幕坐标（即原用于left/top的pointTwo.x、pointTwo.y）

计算公式：

right = 父容器宽度 - 鼠标屏幕X坐标 - Tooltip宽度
bottom = 父容器高度 - 鼠标屏幕Y坐标 - Tooltip高度

修改后的代码 #

替换原mousemove事件处理逻辑，改为计算并设置right和bottom：

.on('mousemove', function(event) {
    const node = document.querySelector('#svg > g > rect');
    var pointOne = document.querySelector('svg').createSVGPoint();

    const valX = event.clientX;
    const valY = event.clientY;

    pointOne.x = valX;
    pointOne.y = valY;
    pointOne = pointOne.matrixTransform(node.getScreenCTM().inverse());

    var pointTwo = document.querySelector('svg').createSVGPoint();
    pointTwo.x = pointOne.x;
    pointTwo.y = pointOne.y;
    pointTwo = pointTwo.matrixTransform(node.getScreenCTM());

    // 获取父容器与Tooltip的实时渲染尺寸
    const parentRect = main.node().getBoundingClientRect();
    const tooltipRect = div.node().getBoundingClientRect();

    // 计算right和bottom值
    const rightVal = parentRect.width - pointTwo.x - tooltipRect.width;
    const bottomVal = parentRect.height - pointTwo.y - tooltipRect.height;

    div
        .html(`My pos coordinates are-right: ${rightVal.toFixed(2)}px; bottom: ${bottomVal.toFixed(2)}px`)
        .style('right', `${rightVal}px`)
        .style('bottom', `${bottomVal}px`)
        // 清除原有top/left属性，避免定位冲突
        .style('top', 'auto')
        .style('left', 'auto');
});

关键注意点 #

• 必须将原top和left属性设为auto，否则CSS定位规则会导致冲突
• 使用getBoundingClientRect()获取实时渲染尺寸，确保窗口缩放或容器尺寸变化时计算依然准确
• 通过toFixed(2)可以保留两位小数，匹配示例中的数值格式

内容的提问来源于stack exchange，提问作者smpa01