Eu me deparei com esse problema muito com D3. Na maior parte do tempo, gosto de sobrepor objetos HTML ao meu SVG.

Minha estratégia atual é criar um DIV vazio ao lado do elemento SVG chamado .html-overlay. Eu posiciono de acordo com o padding interno que eu configurei no SVG para o meu gráfico principal (ex: 20px). Então eu uso a seguinte função (com jQuery) para descobrir onde o elemento HTML deve ir:

//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
        };
    }

Eu me pergunto, deve haver alguma maneira interna (não dependente de jQuery) para obter rapidamente o deslocamento de um elemento. É muito útil (especialmente depois que um elemento passa por várias traduções, rotações, escalas, etc.)

Também seria ótimo ter funções para descobrir o deslocamento do "centro" de um elemento, o ponto mais alto do elemento, o mais inferior, o mais à esquerda, o mais à direita, etc.

NOTA:

O getBoundingClientRect () não fornece os números corretos por algum motivo:

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