J'ai besoin de connaître exactement la largeur et la hauteur d'un gélément arbitraire dans mon SVGparce que je dois dessiner un marqueur de sélection autour de lui une fois que l'utilisateur a cliqué dessus.

Ce que j'ai vu sur Internet est quelque chose comme: d3.select("myG").style("width"). Le problème est que l'élément n'aura pas toujours un jeu d'attributs de largeur explicite. Par exemple, lorsque je crée un cercle à l'intérieur du g, il aura le radious ( r) défini au lieu de la largeur. Même si j'utilise la window.getComputedStyleméthode sur a circle, elle retournera "auto".

Existe-t-il un moyen de calculer la largeur d'un svgsélement arbitraire dans D3?

Je vous remercie.

Pour les éléments SVG

En utilisant quelque chose comme selection.node().getBBox()vous obtenez des valeurs comme

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 

Pour les éléments HTML

Utilisation selection.node().getBoundingClientRect()

.getBoundingClientRect () renvoie la taille d'un élément et sa position par rapport à la fenêtre.

• gauche droite
• haut, bas
• hauteur largeur

Exemple :

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;

Une fois, j'ai rencontré le problème lorsque je ne savais pas quel élément actuellement stocké dans ma variable (svg ou html) mais que j'avais besoin de l'obtenir en largeur et en hauteur. J'ai créé cette fonction et je souhaite la partager:

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

Petite démo dans l'extrait caché ci-dessous. Nous gérons le clic sur le div bleu et sur le cercle svg rouge avec la même fonction.

var svg = d3.select('svg')
  .attr('width', 50)
  .attr('height', 50);

function computeDimensions(selection) {
	var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) {
   	dimensions = node.getBBox();
  } else {
  	dimensions = node.getBoundingClientRect();
  }
  console.clear();
  console.log(dimensions);
  return dimensions;
}

var circle = svg
    .append("circle")
    .attr("r", 20)
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("fill", "red")
    .on("click", function() { computeDimensions(circle); });
    
var div = d3.selectAll("div").on("click", function() { computeDimensions(div) });

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

.div {
  display: inline-block;
  background-color: blue;
  margin-right: 30px;
  width: 30px;
  height: 30px;
}

<h3>
  Click on blue div block or svg circle
</h3>
<svg></svg>
<div class="div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>