Ho bisogno di conoscere esattamente la larghezza e l'altezza di un gelemento arbitrario nel mio SVGperché ho bisogno di disegnare un indicatore di selezione attorno ad esso una volta che l'utente ha cliccato su di esso.

Quello che ho visto in internet è qualcosa di simile: d3.select("myG").style("width"). Il problema è che l'elemento non avrà sempre un attributo di larghezza esplicito impostato. Ad esempio, quando creo un cerchio all'interno di g, avrà il radious ( r) impostato al posto della larghezza. Anche se utilizzo il window.getComputedStylemetodo su a circle, restituirà "auto".

C'è un modo per calcolare la larghezza di una selezione arbitraria svgin D3?

Grazie.

Per elementi SVG

Usando qualcosa di simile selection.node().getBBox()ottieni valori come

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

Per elementi HTML

Uso selection.node().getBoundingClientRect()

.getBoundingClientRect () restituisce la dimensione di un elemento e la sua posizione rispetto al viewport. Possiamo facilmente ottenere quanto segue

• sinistra destra
• in alto, in basso
• altezza larghezza

Esempio :

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

Una volta ho affrontato il problema quando non sapevo quale elemento fosse attualmente memorizzato nella mia variabile (svg o html) ma avevo bisogno di ottenerlo larghezza e altezza. Ho creato questa funzione e voglio condividerla:

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

Piccola demo nello snippet nascosto di seguito. Gestiamo il clic sul div blu e sul cerchio rosso svg con la stessa funzione.

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>