D3.js: Jak uzyskać obliczoną szerokość i wysokość dowolnego elementu?

120

Muszę dokładnie znać szerokość i wysokość dowolnego gelementu w moim, SVGponieważ po kliknięciu go przez użytkownika muszę narysować wokół niego znacznik wyboru.

Co widziałem w Internecie jest coś takiego: d3.select("myG").style("width"). Problem polega na tym, że element nie zawsze będzie miał wyraźnie ustawiony atrybut szerokości. Na przykład, kiedy utworzę okrąg wewnątrz g, będzie on miał ustawioną radious ( r) zamiast szerokości. Nawet jeśli użyję window.getComputedStylemetody na a circle, zwróci ona „auto”.

Czy istnieje sposób, aby obliczyć szerokość dowolnego svgelementu w D3?

Dziękuję Ci.

André Pena
źródło

Odpowiedzi:

225

Dla elementów SVG

Użycie czegoś takiego jak selection.node().getBBox()ty uzyskuje wartości takie jak

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

Dla elementów HTML

Posługiwać się selection.node().getBoundingClientRect()

Christophera Hacketta
źródło
36
W przypadku elementów HTML użyj getBoundingClientRect()zamiast pliku tylko SVG getBBox(). Tak jak to:d3.select("body").node().getBoundingClientRect().width
Toph
1
Przydałoby się trochę więcej informacji, aby pomóc. W przypadku elementów SVG lub HTML? Czy problem dotyczy tylko przeglądarki Firefox? Czy coś zostało zgłoszone w konsoli? Jaka jest zwracana wartość? Czy masz minimalny przykład kodu (jsfiddle), który przedstawia problem?
Christopher Hackett
29

.getBoundingClientRect () zwraca rozmiar elementu i jego położenie względem widocznego obszaru.

  • Lewo prawo
  • Góra dół
  • wysokość szerokość

Przykład:

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;
Malik Khalil
źródło
1

Kiedyś napotkałem problem, kiedy nie wiedziałem, który element jest obecnie przechowywany w mojej zmiennej (svg lub html), ale potrzebowałem uzyskać szerokość i wysokość. Stworzyłem tę funkcję i chcę ją udostępnić:

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

Małe demo w ukrytym fragmencie poniżej. Obsługujemy kliknięcie niebieskiego div i czerwonego koła svg z tą samą funkcją.

Michaił Szabrikow
źródło