Как я могу получить высоту каждого в группе сгенерированных элементов D3.js? - PullRequest
Новая
       6

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

0 голосов
/ 28 августа 2018

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

В моем случае, однако, я хочу получить вычисленную высоту группы элементов, созданных D3.

Элементы в группе создаются следующим образом: 

const boxGroup = mainArea.selectAll('.boxes-user')
  .data(data)
  .enter()
  .append("g")
  .attr('id', (d) => 'bars-user-' + d[0].userId )
  .attr("transform", (d) => {
    currentRow = currentRow + 1;
    return "translate( 0, " + ((rowHeight * currentRow) + (20 * currentRow)) + ")"
  });

Создает несколько <g> элементов. Один для каждого элемента в массиве data.

Я хотел бы иметь возможность определить вычисленную возможную высоту каждой сгенерированной .boxes-user группы.

Возможно ли это? Если да, то как?

1 Ответ

0 голосов
/ 28 августа 2018

Вычисление ширины и высоты для <g> элементов происходит точно так же, как при использовании getBBox(). Поскольку указанная ссылка не дает пример, вот одна консоль, в которой регистрируются высоты элементов <g>, содержащих случайные элементы. 

var data = [{type: 'text',value: "Test1"}, {type: 'rect', value: {w: 40, h: 70}}, {type: 'circle', value: {r: 12, x: 120}}];

const boxGroup = d3.select('svg').selectAll('.boxes-user')
  .data(data)
  .enter()
  .append("g").classed('boxes-user', true)
  .attr("transform", function (d, i) {
    return "translate(" + (i * 100) + ", 30)";
  }).each(function (d) {
		if(d.type === 'circle') {
    	d3.select(this).append('circle').style('fill', d.value.color || 'steelblue')
         .attr('r', d.value.r || 10).attr('cx', d.value.x || 20);
    } else if(d.type === 'rect') {
  		d3.select(this).append('rect').attr('width', d.value.w || 40).attr('height', d.value.h || 20);  	
    } else {
	    d3.select(this).append('text').text(d.value);
    }    
    // "this" is the group element here. Computing height for the same
    console.log('height of ' + d.type + ': ' + d3.select(this).node().getBBox().height);
  });
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

<svg width="700" height="500"></svg>

Убедитесь, что элементы внутри него добавлены, прежде чем вычислять размеры, иначе это приведет к получению 0. Надеюсь, это очистит его.

...