Question

我如何在D3矩形组件中包含的文本的顶部/底部/左侧/右侧填充？我只能将其放在文本的左侧，尽管我不确定这确实是正确的方法。我已经为此奋斗了几天，如果有人能帮助我找出解决方法，那将是很棒的。

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

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>

Answer 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>

如何在矩形的顶部/底部/左侧/右侧填充文本

1 个答案: