Ширина чтения текстового элемента d3

Я хотел бы прочитать ширину элементов <text>, созданных в d3, после их создания.

Я пробовал

svg.selectAll("text")
    .each(function () {
        console.log('text', d3.select(this).style("width"));
    }); // 'auto'

и

svg.selectAll("text")
    .each(function () {
        console.log('text', $(this).css("width"));
    }); // '0px'

Заранее спасибо

Ответы

Ответ 1

В методе выбора (например, attr):

   this.getComputedTextLength().

В одном элементе вы можете сказать

   selection.node().getComputedTextLength().

Вы также можете использовать getBBox для ширины и высоты

Ответ 2

Вы можете использовать:

var wh = {w:-1,h:-1};
Array.from(document.querySelectorAll('text')).map(function(ele) {
  var bbox = ele.getBoundingClientRect();
  wh = {
   w: (wh.w<bbox.width) ? bbox.width :wh.w,
   h: (wh.h<bbox.height) ? bbox.height :wh.h
  }
})

После этого wh.w будет содержать наибольшую ширину, а wh.h будет содержать наибольшую высоту любого текста. Затем вы должны ввести более точный селектор CSS, соответствующий вашим потребностям.