d3.js - 查找SVG元素的偏移位置

Question

对于D3，我经常遇到这个问题。很多时候，我喜欢在SVG上覆盖HTML对象。

我当前的策略是在名为.html-overlay的SVG元素旁边创建一个空的DIV。我根据在SVG中为主图形设置的内部填充来定位它(例如:20px)。然后，我使用以下函数(使用jQuery)来确定HTML元素应该放在哪里:

//element is the object returned by D3 .append()
var getOffset: function(element) {
        var $element = $(element[0][0]);
        return {
            left: $element.offset().left - $('.html-overlay').offset().left,
            top: $element.offset().top - $('.html-overlay').offset().top
        };
    }

我想知道，必须有一些内部(非jQuery依赖)方法来快速获取元素的偏移量。这非常有用(尤其是在一个元素经过多次平移，旋转，缩放等之后)

具有确定元素“中心”的偏移量，元素的最高点，最底，最左，最右等的功能也将很好。

注意:

由于某些原因，getBoundingClientRect()没有给出正确的数字:

var $element = $(element[0][0]);

            console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object

ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150

Answer 1

您是否尝试过

var xywh =element[0][0].getBoundingClientRect();

似乎拥有一切？
(原始解决方案在ojota中)