Блог

Главная - Вопросы по программированию - Прямоугольники с изменяемым размером для узлов в сворачиваемом дереве D3

Прямоугольники с изменяемым размером для узлов в сворачиваемом дереве D3

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я изменил пример сворачиваемого дерева, чтобы использовать прямоугольники вместо кругов.

https://plnkr.co/edit/UKUufJItPQqIKH8DBGLx?p=preview

Мой вопрос в том, как заставить высоты прямоугольников изменять свои размеры в зависимости от текста узлов. Если вы заметите, что верхний узел имеет переполненный текст, в то время как размер

Я знаю .getBBox() и пример канонического переноса, но поскольку я все еще новичок в D3, мне интересно, как объединить все это, чтобы заставить его работать.

Ответ №1:

Канонический перенос: 

 function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/s /).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy   "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy",   lineNumber * lineHeight   dy   "em").text(word);
      }
    }
  });
}

nodeHeight = 40, nodeWidth = 150;

nodeUpdate.selectAll("text").call(wrap,nodeWidth);

nodeUpdate.select('rect')
    .attr('rx', 6)
    .attr('ry', 6)
    .attr('y', -(nodeHeight / 2))
    .attr('width', nodeWidth)
    .attr('height', nodeHeight)
    .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });

Использование getBBox():

 nodeUpdate.select('rect')
    .attr('rx', 6)
    .attr('ry', 6)
    .attr('y', -(nodeHeight / 2))
    .attr('width', function(d){
      var textElement = d3.select(this.parentNode).select("text").node();
      var bbox = textElement.getBBox();
      var width = bbox.width;
      return width*2;
    })
    .attr('height', nodeHeight)
    .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });

Плунжер: https://plnkr.co/edit/KtSfKp8mpwnMXElfpC9r?p=preview

Комментарии:

1. Это потрясающе! Как мне изменить это, чтобы ширина была фиксированной, но высота прямоугольника изменялась? Я наивно пытался поменять местами "ширину" с "высотой", где это применимо, и, к сожалению, это было не так просто.