Comment obtenir les coordonnées absolues de l'objet à l'intérieur d'un & gt; g & gt; groupe?

D'autres ici ont déjà mentionné SVGLocatable.getBBox() ce qui est utile pour saisir la boîte englobante d'un élément en fonction de son propre système de coordonnées local. Malheureusement, comme vous l'avez remarqué, cela ne prend pas en compte les transformations effectuées sur l'élément ou sur ses éléments parents.

Il ya un couple d'autres fonctions disponibles qui vous aideront à sortir une tonne lorsque vous traitez avec ces transformations.

SVGLocatable.getScreenCTM() vous donne un SVGMatrix représentant les transformations nécessaires pour convertir à partir de la fenêtre d'affichage des coordonnées de coordonnées locales de votre élément. C'est formidable, parce qu'on va prendre en compte les transformations appliquées à l'élément auquel il est appelé, et toutes les transformations appliquées aux éléments parents. Malheureusement, il prend également en compte exactement où l'élément sur l'écran, ce qui signifie que si vous avez du contenu avant de votre document svg, ou même juste quelques marges autour d'elle, le retour de la matrice comprendra que l'espace d'une traduction.

Element.getBoundingClientRect() vous permettra de prendre en compte cet espace. Si vous appelez cette fonction sur le document SVG lui-même, vous pouvez trouver de combien, le SVG est décalé sur l'écran.

Alors tout ce que vous avez à faire est de combiner les deux si vous voulez convertir entre les systèmes de coordonnées. ICI est quelques bonnes infos sur la façon dont une SVGMatrix œuvres. La chose importante à savoir pour l'instant est qu'un SVGMatrix est un objet avec six propriétés abcdeet f qui représentent une transformation de la façon suivante:

Permet de dire que vous avez une variable svgDoc qui est une référence au document svg (pas un d3 de la sélection, mais l'élément lui-même). Ensuite, vous pouvez créer une fonction qui va convertir le système de coordonnées de l'élément svg elem comme suit.

function convertCoords(x,y) {

  var offset = svgDoc.getBoundingClientRect();

  var matrix = elem.getScreenCTM();

  return {
    x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left,
    y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top
  };
}

Alors, de dire que tu voulais mettre un point au milieu de elemvous pourriez faire quelque chose comme ceci:

var bbox = elem.getBBox(),
    middleX = bbox.x + (bbox.width / 2),
    middleY = bbox.y + (bbox.height / 2);

var absoluteCoords = convertCoords(middleX, middleY);

var dot = svg.append('circle')
  .attr('cx', absoluteCoords.x)
  .attr('cy', absoluteCoords.y)
  .attr('r', 5);

bien sûr, vous souhaiterez probablement de les généraliser la convertCoords fonction de sorte que vous pouvez passer à l'élément cible, mais j'espère que vous aurez éteint dans la bonne direction. Bonne chance!

Une meilleure mise en œuvre serait une usine qui génère une fonction de conversion pour chaque élément, et le document svg contexte:

function makeAbsoluteContext(element, svgDocument) {
  return function(x,y) {
    var offset = svgDocument.getBoundingClientRect();
    var matrix = element.getScreenCTM();
    return {
      x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left,
      y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top
    };
  };
}

Il pourrait être utilisé comme suit compte tenu de la même elem et svgDoc que les naïfs exemple:

var bbox = elem.getBBox(),
    middleX = bbox.x + (bbox.width / 2),
    middleY = bbox.y + (bbox.height / 2);

//generate a conversion function
var convert = makeAbsoluteContext(elem, svgDoc);

//use it to calculate the absolute center of the element
var absoluteCenter = convert(middleX, middleY);

var dot = svg.append('circle')
  .attr('cx', absoluteCenter.x)
  .attr('cy', absoluteCenter.y)
  .attr('r', 5);

D3 dispose d'une fonction intégrée pour analyser svg transforme: d3.transformer

Vous pouvez l'utiliser pour obtenir le traduire array ([x, y]) de la transformation, c'est à dire:

var transformText = d3.select("#mygroup").attr("transform");
var translate = d3.transform(transformText).translate;  //returns [0,-25]

Belle démo ici: https://codepen.io/netsi1964/pen/pWjwgP

point = point.matrixTransform(svg.getScreenCTM().inverse())