Ich bin mit D3 auf dieses Problem gestoßen. Die meiste Zeit mag ich es, HTML-Objekte über meine SVG zu legen.

Meine derzeitige Strategie besteht darin, eine leere DIV neben dem SVG-Element mit dem Namen .html-overlay zu erstellen. Ich positioniere es gemäß der internen Polsterung, die ich in der SVG-Datei für meine Hauptgrafik festgelegt habe (Beispiel: 20px). Dann benutze ich die folgende Funktion (mit jQuery), um herauszufinden, wohin das HTML-Element gehen soll:

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

Ich frage mich, ob es eine interne (nicht jQuery-abhängige) Möglichkeit geben MUSS, den Offset eines Elements schnell zu ermitteln. Dies ist sehr nützlich (insbesondere, nachdem ein Element mehrere Übersetzungen, Rotationen, Skalen usw. durchlaufen hat).

Es wäre auch großartig, Funktionen zum Ermitteln des Versatzes der "Mitte" eines Elements, des obersten Punkts des Elements, des untersten, des ganz linken, des ganz rechten Elements usw. zu haben.

HINWEIS:

GetBoundingClientRect () gibt aus irgendeinem Grund nicht die richtigen Zahlen an:

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