Javascript 在D3中换行文本

我想让文本包装在下面的D3树上，这样代替

Foo is not a long word

每一行都被包装到

Foo is
not a
long word

我尝试将文本设置为“foreignObject”而不是文本对象，文本确实会换行，但它不会在树动画上移动，而是全部分组在左上角

代码位于

Javascript:

var width = 960,
    height = 500;

var tree = d3.layout.tree()
    .size([width - 20, height - 20]);

var root = {},
    nodes = tree(root);

root.parent = root;
root.px = root.x;
root.py = root.y;

var diagonal = d3.svg.diagonal();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(10,10)");

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link");

var duration = 750,
    timer = setInterval(update, duration);

function update() {
  if (nodes.length >= 500) return clearInterval(timer);

  // Add a new node to a random parent.
  var n = {id: nodes.length},
      p = nodes[Math.random() * nodes.length | 0];
  if (p.children) p.children.push(n); else p.children = [n];
  nodes.push(n);

  // Recompute the layout and data join.
  node = node.data(tree.nodes(root), function(d) { return d.id; });
  link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; });

  // 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');

  // Add entering links in the parent’s old position.
  link.enter().insert("path", ".node")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: d.source.px, y: d.source.py};
        return diagonal({source: o, target: o});
      });

  // Transition nodes and links to their new positions.
  var t = svg.transition()
      .duration(duration);

  t.selectAll(".link")
      .attr("d", diagonal);

  t.selectAll(".node")
      .attr("x", function(d) { return d.px = d.x; })
      .attr("y", function(d) { return d.py = d.y; });
}

可以修改以向节点添加元素。向节点添加包装文本需要两个主要更改。我没有深入研究让文本在转换期间更新其位置，但添加它应该不会太难

第一个是添加一个函数包装，基于上面示例中的函数包装。wrap将负责添加元素，以使文本适合一定的宽度：

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);
            }
        }
    });
}

第二个变化是，您需要为每个节点调用wrap，而不是设置每个节点的文本：

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

---

如果您愿意添加另一个JS库，另一个选择是使用D3插件。它具有内置功能。它甚至支持填充和调整文本大小以填充可用空间

d3plus.textwrap()
  .container(d3.select("#rectWrap"))
  .draw();

我用过。这肯定比你自己计算包装好

---

有一种文本包装的方法，但我从未使用过，所以我不能说它有用。

这是一种使用d3 plus进行文本包装的方法。这对我来说真的很容易，而且现在可以在所有浏览器中使用

d3plus.textwrap .container3.selectIntelligent .形状为“正方形” .370 .身高55 雷西泽先生

---

.抽签 如果您使用的是React，那么可以使用的库是。它公开了一个更强大的支持宽度参数的SVG文本元素

import { Text } from '@visx/text';

const App = () => (
  <svg>
    <Text width={20}>Foo is not a long word</Text>
  </svg>
);

---

我昨天回答了一个非常相似的问题，实际上我已经看到了你在回答中发布的两个资源，不幸的是，这两个资源都没有给我太多的洞察力——我不理解tspan元素如何与D3结合使用。mbostock示例可能有一些用处，但我不知道x.rangeBand是什么，也不知道如何用简单文本调用实现的wrap函数。我以前曾与类似的东西进行过斗争，发现只需翻转我的树x.rangeBand就是一个宽度。因此，您可以将其替换为另一个整数。我修改了我的示例，以显示更新我的树是多么容易，只需在第1222行添加wrap函数和对它的调用，并为测试添加很长的第一个节点名。我看过你的，但无法立即让它工作。不幸的是，我无法让我的示例使用它进行转换，但谢谢你，因为这是朝着正确方向迈出的一步。我明白了，我必须添加t.selectAlltspan。。。在过渡之后。这和你的有用帖子一起回答了我的问题@用户235236：太好了，很高兴能帮忙！答案很有帮助。谢谢@mdml，我唯一搞不清楚的是如何将动画应用于包装文本。在.callwrap之前设置的.transition，30将不起作用。在将文本设置为tspan之前，在wrap函数中插入一个转换似乎也不起作用@user235236您是如何解决的？这非常有用，谢谢：我查看了blocks.org示例，不知道他在哪里添加了文本元素。d3 blocks.org的例子应该更简单