How to dynamically adjust the size of a D3 rect based on the foreignObject's height

user_13492469 0
Viewed 286

How to dynamically adjust the size of a D3 rect based on the foreignObject's height. I am not sure how to get hold of the height of the foreignObject. I tried a lot of methods but none seem to work. I have been struggling with this for the past couple of day. It would be great if anyone can help me with this.

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>

d3.js javascript
1 Answers

You could just give the body a background instead:

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>

Alternatively you can get the height of the body using text.node().clientHeight:

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>

user_50153560
Related