D3.js: Wie erhalte ich die berechnete Breite und Höhe für ein beliebiges Element?

120

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.

André Pena
quelle

Antworten:

225

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()

Christopher Hackett
quelle
36
Verwenden Sie für HTML-Elemente getBoundingClientRect()anstelle von nur SVG getBBox(). Wie so:d3.select("body").node().getBoundingClientRect().width
Toph
1
Könnte mit ein bisschen mehr Infos helfen. Für SVG- oder HTML-Elemente? Ist es nur Firefox, um das es geht? Wird etwas in der Konsole gemeldet? Was ist der zurückgegebene Wert? Haben Sie ein minimales Codebeispiel (jsfiddle), das das Problem demonstriert?
Christopher Hackett
29

.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;
Malik Khalil
quelle
1

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.

Mikhail Shabrikov
quelle