Jak dynamicznie dostosować rozmiar Rect D3 na podstawie wysokości RoundObject. Nie jestem pewien, jak zdobyć wysokość the corctoralObject. Próbowałem wielu metod, ale żaden nie działa. Walczyłem z tym przez ostatnie miejsce. Byłoby wspaniale, gdyby ktoś mógł mi z tym pomóc.

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>
2
PassionateAbtCoding 22 październik 2020, 11:36

1 odpowiedź

Najlepsza odpowiedź

Możesz po prostu dać body zamiast tego:

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>

Alternatywnie możesz uzyskać wysokość ciała za pomocą 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>
2
Ruben Helsloot 22 październik 2020, 11:13