如何在 D3 树可视化中包装文本标签以提高可读性？

在 D3 树中包裹文本

在 D3 树可视化中，有时需要将文本标签包裹在节点上以使树更具可读性。本文演示了如何实现这种文本换行。

挑战

考虑以下 D3 树：

Foo is not a long word

理想情况下，文本应该换行为：

Foo is
not a
long word

解决方案

要实现文本换行，需要进行两个关键修改：

1. 创建换行函数：

   实现换行函数，添加 元素节点并控制环绕宽度：

   <code class="javascript">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
               x = text.attr("x"),
               y = text.attr("y"),
               dy = 0, //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);
               }
           }
       });
   }</code>

2. 使用环绕函数：

   不要在每个节点上设置文本，而是应用换行函数：

   <code class="javascript">// Add entering nodes in the parent’s old position.
   node.enter().append("text")
       .attr("class", "node")
       .attr("x", function (d) { return d.parent.px; })
       .attr("y", function (d) { return d.parent.py; })
       .text("Foo is not a long word")
       .call(wrap, 30); // wrap the text in <= 30 pixels</code>

通过实现这些修改，您可以成功地在 D3 树节点上换行文本。

以上是如何在 D3 树可视化中包装文本标签以提高可读性？的详细内容。更多信息请关注PHP中文网其他相关文章！