Ich muss die Breite und Höhe eines beliebigen gElements in meinem genau kennen, SVGda ich einen Auswahlmarker darum zeichnen muss, sobald der Benutzer darauf geklickt hat.

Was ich im Internet gesehen habe, ist so etwas wie : d3.select("myG").style("width"). Das Problem ist, dass für das Element nicht immer ein explizites Breitenattribut festgelegt ist. Wenn ich zum Beispiel einen Kreis innerhalb von erstelle g, wird ranstelle der Breite radious ( ) gesetzt. Selbst wenn ich die window.getComputedStyleMethode für a verwende circle, wird "auto" zurückgegeben.

Gibt es eine Möglichkeit, die Breite einer beliebigen svgAuswahl in zu berechnen D3?

Danke dir.

Für SVG-Elemente

Wenn Sie so etwas verwenden, erhalten selection.node().getBBox()Sie Werte wie

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

Für HTML-Elemente

Verwenden selection.node().getBoundingClientRect()

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

• links rechts
• oben unten
• Höhe Breite

Beispiel:

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

Einmal war ich mit dem Problem konfrontiert, als ich nicht wusste, welches Element derzeit in meiner Variablen (svg oder html) gespeichert ist, aber ich musste es Breite und Höhe erhalten. Ich habe diese Funktion erstellt und möchte sie teilen:

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 das Klicken auf das blaue Div und auf 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>