it-swarm.com.de

D3.js: Wie erhält man die berechnete Breite und Höhe für ein beliebiges Element?

Ich muss die Breite und Höhe für ein beliebiges g-Element in meiner SVG genau kennen, da ich nach dem Anklicken eine Auswahlmarkierung zeichnen muss.

Was ich im Internet gesehen habe, ist etwa so: d3.select("myG").style("width"). Das Problem ist, dass das Element nicht immer über ein explizites Breitenattribut verfügt. Wenn ich zum Beispiel einen Kreis innerhalb von g erstelle, wird anstelle der Breite ein radious (r) gesetzt. Selbst wenn ich die window.getComputedStyle-Methode für eine circle verwende, wird "auto" zurückgegeben.

Gibt es eine Möglichkeit, die Breite eines beliebigen svg selement in D3 zu berechnen?

Vielen Dank.

111
André Pena

Für SVG-Elemente

Mit etwas wie selection.node().getBBox() erhalten Sie Werte wie

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

Für HTML-Elemente

Verwenden Sie selection.node().getBoundingClientRect()

204

.getBoundingClientRect () gibt die Größe eines Elements und seine Position relativ zum Viewport zurück. Wir können leicht folgen

  • links rechts 
  • oben unten 
  • höhe Breite

Beispiel:

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

Einmal sah ich mich mit dem Problem konfrontiert, als ich nicht wusste, welches Element derzeit in meiner Variablen (svg oder html) gespeichert ist. Ich habe diese Funktion erstellt und möchte sie weitergeben:

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

Kleine Demo im versteckten Ausschnitt unten. Wir behandeln den blauen Div und den roten Svg-Kreis mit der gleichen Funktion.

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>

1