如何为包含在矩形内的文本在顶部/底部/左侧/右侧提供填充答案

【问题标题】：How to give padding on top/bottom/left/right to text that is contained inside a rect如何为包含在矩形内的文本在顶部/底部/左侧/右侧提供填充
【发布时间】：2021-01-30 11:48:03
【问题描述】：

如何为包含在 D3 rect 组件中的文本在顶部/底部/左侧/右侧添加填充？我只能将它放在文本的左侧，尽管我不确定这确实是正确的方式。我已经为此苦苦挣扎了几天，如果有人能帮我找出解决方法，那就太好了。

下面是我到目前为止的示例代码 ->

https://jsfiddle.net/passionateCoder/4uf3h2L8/

<!DOCTYPE html>
<html>
  <head>
    <!-- <script
      data-require="d3@3.5.3"
      data-semver="3.5.3"
      src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"
    ></script> -->
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>

  <body>
    <script>
      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', 10)
              .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', 10)
                .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 =
        'Now is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their country';

      var totHeight = 0;

      drawRect();

      function drawRect() {
        var someWidth = 212;

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

        var rect = g
          .append('rect')
          .style('fill', 'steelblue')
          .attr('width', someWidth)
          .attr('height', 1);

        var txt = g
          .append('text')
          .text(longText)
          .attr('x', 4)
          .attr('y', 10)
          .attr('dy', '.71em')
          .style('fill', 'white')
          .call(wrap, someWidth);

        var height = txt.node().getBBox().height + 25;
        totHeight += height + 10;
        rect.attr('height', height);
      }
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript css svg d3.js

【解决方案1】：

首先，在wrap函数中，我建议你根据你在文本选择中使用的属性来设置x属性：

x = text.attr('x')

之后，只需从someWidth 中减去两个边距。例如，由于您使用的是 14 (10 + 4)：

var txt = g.append('text')
    //etc...
    .attr('x', 14)
    .call(wrap, someWidth - 28);

这是您的代码进行了这些更改：

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 =
  'Now is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their countryNow is the time for all good men to come to the aid of their country';

var totHeight = 0;

drawRect();

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

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

  var rect = g
    .append('rect')
    .style('fill', 'steelblue')
    .attr('width', someWidth)
    .attr('height', 1);

  var txt = g
    .append('text')
    .text(longText)
    .attr('x', 14)
    .attr('y', 10)
    .attr('dy', '.71em')
    .style('fill', 'white')
    .call(wrap, someWidth - 28);

  var height = txt.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>

【讨论】：