javascript - 如何防止SVG文字流出其圆圈？

Question

这就是文本现在在圆圈内的显示方式:

这就是我想在圆圈内显示文本的方式:

我正在寻找一种方法来切断/隐藏/或？不适合圆圈内的文本部分，并在这些太长文本的末尾显示三个点。我找到了很多解释如何将多个单词围成一个圆圈的答案，但我找不到以这种方式将一个太长的单词放在一个圆圈中的方法。

这些是输入时添加到圆圈和文本的样式:

enterNode = (selection) => {
        selection.select('circle')
            .attr("r", 30)
            .style("fill", function (d) {
                return color(d.label)
            })
            .style("stroke", "#4D5061")

        selection.select('text')
            .style("fill", "#3D3B30")
            .style("font-weight", "600")
            .style("text-transform", "uppercase")
            .style("text-anchor", "middle")
            .style("alignment-baseline", "middle")
    }

圆圈是以这种方式显示的 d3 force 布局的一部分

<svg>
  <g class="node-group">
    <g class="node>
      <circle class="circle"></circle>
      <text class="text"></text>
    </g>
  </g>
  <g class="link-group">...</g>
</svg>

如果您有解决此问题的想法，我将不胜感激!

Answer 1

这是一个基于 D3 的 SVG 元素解决方案，因为您有一个带有 D3 力导向图的 SVG。

它涉及获取圆的宽度(您可以使用 attr("r") 作为 getter，但这里我使用的是 getBBox())和文本的长度(此处我使用 getComputedTextLength())并将这些值传递给自定义函数。

首先，让我们看看没有任何功能的圆圈和文字。这是我的演示中的文本:

This above all: to thine own self be true, And it must follow, as the night the day, Thou canst not then be false to any man.

如您所见，它不仅比圆长，而且实际上比 SVG 还大:

var svg = d3.select("svg");
var circle = svg.append("circle")
  .attr("cx", 200)
  .attr("cy", 110)
  .attr("r", 100)
  .style("fill", "powderblue")
  .style("stroke", "darkslategray");

var text = svg.append("text")
  .style("text-anchor", "middle")
  .style("dominant-baseline", "central")
  .attr("x", 200)
  .attr("y", 110)
  .text("This above all: to thine own self be true, And it must follow, as the night the day, Thou canst not then be false to any man.");

svg {
  border: 1px solid gray;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="400" height="220"></svg>

现在让我们调用我们的函数，这里命名为 crop()。必须在文本选择上调用它，使用圆圈选择作为第二个参数，如下所示:

text.call(crop, circle);

这是函数:

function crop(text, circle) {
    var circleRadius = circle.node().getBBox().width;
    while (text.node().getComputedTextLength() > circleRadius) {
        text.text(text.text().slice(0, -4) + "...");
    }
};

如您所见，它基本上采用值并在 while 循环中裁剪文本(使用 "...")直到它适合空间。实际上，我在每个循环中再次打印文本，以获取节点的计算长度……但是，那些现代浏览器速度快得让人无法察觉。

这是演示:

var svg = d3.select("svg");
var circle = svg.append("circle")
  .attr("cx", 200)
  .attr("cy", 110)
  .attr("r", 100)
  .style("fill", "powderblue")
  .style("stroke", "darkslategray");

var text = svg.append("text")
  .style("text-anchor", "middle")
  .style("dominant-baseline", "central")
  .attr("x", 200)
  .attr("y", 110)
  .text("This above all: to thine own self be true, And it must follow, as the night the day, Thou canst not then be false to any man.");

text.call(crop, circle);

function crop(text, circle) {
  var circleRadius = circle.node().getBBox().width;
  while (text.node().getComputedTextLength() > circleRadius) {
    text.text(text.text().slice(0, -4) + "...");
  }
}

svg {
  border: 1px solid gray;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="400" height="220"></svg>