如何用D3.js包装长文本标签？

Question

我使用node-tree创建了一个D3，并想了解如何包装太长的文本。

  nodeUpdate.select("text")
      .text(function(d) {
        if(d.name == "root"){
            return "";
        } else {
            return d.name;
        }
       })
      .style("font-family", "Verdana")
      .style("fill-opacity", 1);

如果d.name太长，我希望它填充几行而不是一行。我发现这个http://bl.ocks.org/mbostock/7555321但我似乎不明白这是如何工作的，我当然不明白“wrap”函数是如何得到它的输入的？在此示例中，wrap函数在调用时没有参数。

Answer 1

http://bl.ocks.org/mbostock/7555321的代码有两个关键部分。

对wrap（）的调用完成了

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll(".tick text")
  .call(wrap, x.rangeBand());

期待一个文本元素和宽度就像在

node.append("text")
  // Make sure to have a text element
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 50);

这里令人困惑的部分是调用语句适用于当前选择，如.tick text或所有节点。

第二部分是必需的text.text()否则它不起作用。

function wrap(text, width) {
  text.each(function() {
  var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),