javascript - 如何根据foreignObject的高度动态调整D3矩形的大小

Question

如何根据 foreignObject 的高度动态调整 D3 矩形的大小。我不知道如何获得foreignObject 的高度。我尝试了很多方法，但似乎都不起作用。在过去的几天里，我一直在努力解决这个问题。如果有人能帮我解决这个问题，那就太好了。

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'),
      x = text.attr('x')
    dy = parseFloat(text.attr('dy')),
      tspan = text
      .text(null)
      .append('tspan')
      .attr('x', x)
      .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', x)
          .attr('y', y)
          .attr('dy', ++lineNumber * lineHeight + dy + 'em')
          .text(word);
      }
    }
  });
}

var svg = d3
  .select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 5000);

// var longText =
//   'This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text.';

// var longText =
//   '<span>hi</span>';

var longText = '<span> hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';

var totHeight = 0;

drawRect();

function drawRect() {
  //var someWidth = randomIntFromInterval(40, 300);
  var someWidth = 212;

  var g = svg
    .append('g')
    .attr('class', 'foreignObjwrapper')
    .attr('transform', 'translate(20,' + totHeight + ')');

  var rect = g
    .append('rect')
    .style('fill', 'steelblue')
    .attr('x', 50)
    .attr('y', 50)
    .attr('width', someWidth)
    .attr('height', 100);

  const text = g
    .append('foreignObject')
    .attr('width', 200)
    .attr('height', 200)
    .attr('id', 'textBox')
    .attr('x', 50)
    .attr('y', 60)
    .attr('id', 'textBox')
    .style('fill', 'black')
    .append('xhtml:body')
    .html(longText);

  // var img = g.append('svg:image')
  //   .attr('x', 250)
  //   .attr('y', 40)
  //   .attr('width', 24)
  //   .attr('height', 24)
  //   .attr(
  //     'xlink:href',
  //     './img/edit-24-px.svg'
  //   );

  text.on('click', function () {
    var newText = '<span> bye[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';
    //d3.append('text').html("<span> bye </span>");
    text.html(newText);
    console.log('hi', newText);
    //document.getElementsByClassName("textBox").innerHTML = newText;

  });

   //var height = text.node().getBBox().height + 25;
  // totHeight += height + 10;
  // rect.attr('height', height);
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="body"></div>

Answer 1

你可以给 body一个背景:

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'),
      x = text.attr('x')
    dy = parseFloat(text.attr('dy')),
      tspan = text
      .text(null)
      .append('tspan')
      .attr('x', x)
      .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', x)
          .attr('y', y)
          .attr('dy', ++lineNumber * lineHeight + dy + 'em')
          .text(word);
      }
    }
  });
}

var svg = d3
  .select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 5000);

// var longText =
//   'This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text.';

// var longText =
//   '<span>hi</span>';

var longText = '<span> hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';

var totHeight = 0;

drawRect();

function drawRect() {
  //var someWidth = randomIntFromInterval(40, 300);
  var someWidth = 212;

  var g = svg
    .append('g')
    .attr('class', 'foreignObjwrapper')
    .attr('transform', 'translate(20,' + totHeight + ')');

  const text = g
    .append('foreignObject')
    .attr('width', 200)
    .attr('height', 200)
    .attr('id', 'textBox')
    .attr('x', 50)
    .attr('y', 60)
    .append('xhtml:body')
    .style("background", "steelblue")
    .style("border", "dashed black 1px")
    .html(longText);

  // var img = g.append('svg:image')
  //   .attr('x', 250)
  //   .attr('y', 40)
  //   .attr('width', 24)
  //   .attr('height', 24)
  //   .attr(
  //     'xlink:href',
  //     './img/edit-24-px.svg'
  //   );

  text.on('click', function() {
    var newText = '<span> bye[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';
    //d3.append('text').html("<span> bye </span>");
    text.html(newText);
    console.log('hi', newText);
    //document.getElementsByClassName("textBox").innerHTML = newText;

  });

  //var height = text.node().getBBox().height + 25;
  // totHeight += height + 10;
  // rect.attr('height', height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="body"></div>

或者，您可以使用 text.node().clientHeight 获取 body 的高度:

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'),
      x = text.attr('x')
    dy = parseFloat(text.attr('dy')),
      tspan = text
      .text(null)
      .append('tspan')
      .attr('x', x)
      .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', x)
          .attr('y', y)
          .attr('dy', ++lineNumber * lineHeight + dy + 'em')
          .text(word);
      }
    }
  });
}

var svg = d3
  .select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 5000);

// var longText =
//   'This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text.';

// var longText =
//   '<span>hi</span>';

var longText = '<span> hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]hello[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';

var totHeight = 0;

drawRect();

function drawRect() {
  //var someWidth = randomIntFromInterval(40, 300);
  var someWidth = 212;

  var g = svg
    .append('g')
    .attr('class', 'foreignObjwrapper')
    .attr('transform', 'translate(20,' + totHeight + ')');

  const padding = 5;
  var rect = g
    .append('rect')
    .style('fill', 'steelblue')
    .attr("stroke", "black")
    .attr("stroke-dasharray", "5")
    .attr('x', 50)
    .attr('y', 60)
    .attr('width', someWidth + padding * 2);

  const text = g
    .append('foreignObject')
    .attr('width', someWidth)
    .attr('height', 200)
    .attr('id', 'textBox')
    .attr('x', 50 + padding)
    .attr('y', 60 + padding)
    .attr('id', 'textBox')
    .style('fill', 'black')
    .append('xhtml:body')
    .style("margin", 0)
    .html(longText);

  rect.attr("height", text.node().clientHeight + padding * 2);

  // var img = g.append('svg:image')
  //   .attr('x', 250)
  //   .attr('y', 40)
  //   .attr('width', 24)
  //   .attr('height', 24)
  //   .attr(
  //     'xlink:href',
  //     './img/edit-24-px.svg'
  //   );

  text.on('click', function() {
    var newText = '<span> bye[&times;10<sup>-15</sup> ss<sup>-1</sup>]</span>';
    //d3.append('text').html("<span> bye </span>");
    text.html(newText);
    console.log('hi', newText);
    //document.getElementsByClassName("textBox").innerHTML = newText;

  });

  //var height = text.node().getBBox().height + 25;
  // totHeight += height + 10;
  // rect.attr('height', height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="body"></div>