D3.js: Как получить вычисленную ширину и высоту для произвольного элемента?

120

Мне нужно точно знать ширину и высоту произвольного gэлемента в моем, SVGпотому что мне нужно нарисовать маркер выбора вокруг него, как только пользователь щелкнет по нему.

То , что я видел в интернете что - то вроде: d3.select("myG").style("width"). Проблема в том, что для элемента не всегда будет установлен явный атрибут ширины. Например, когда я создаю круг внутри g, у него будет установлен radious ( r) вместо ширины. Даже если я использую этот window.getComputedStyleметод для a circle, он вернет «auto».

Есть ли способ рассчитать ширину произвольного svgвыделения в D3?

Спасибо.

Андре Пена
источник

Ответы:

225

Для элементов SVG

Используя что-то вроде, selection.node().getBBox()вы получаете такие значения, как

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

Для элементов HTML

использование selection.node().getBoundingClientRect()

Кристофер Хакетт
источник
36
Для элементов HTML используйте getBoundingClientRect()вместо SVG-only getBBox(). Вот так:d3.select("body").node().getBoundingClientRect().width
Toph
1
Можно было бы сделать с дополнительной информацией, чтобы помочь. Для элементов SVG или HTML? Проблема только в Firefox? Что-нибудь сообщается в консоли? Какое возвращаемое значение? У вас есть минимальный пример кода (jsfiddle), демонстрирующий проблему?
Christopher Hackett
29

.getBoundingClientRect () возвращает размер элемента и его положение относительно области просмотра. Мы можем легко получить следующее

  • лево право
  • верх, низ
  • высота ширина

Пример :

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;
Малик Халил
источник
1

Однажды я столкнулся с проблемой, когда я не знал, какой элемент в настоящее время хранится в моей переменной (svg или html), но мне нужно было получить его ширину и высоту. Я создал эту функцию и хочу ею поделиться:

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

Небольшая демонстрация в скрытом фрагменте ниже. Мы обрабатываем щелчок по синему div и красному кружку svg с той же функцией.

Михаил Шабриков
источник