D3.js - 如何在此可折叠树中的文本中添加新行？答案

【问题标题】：D3.js - How can I add a new line to the text in this Collapsible Tree?D3.js - 如何在此可折叠树中的文本中添加新行？
【发布时间】：2015-07-20 20:19:13
【问题描述】：

我有一个由 D3 构建的可折叠树。这是 JSFIDDLE：http://jsfiddle.net/mEyQW/57/

如您所见，当节点完全展开时，文本全部重叠。我想添加新行来替换空格（可能有 1 个或 2 个）。例如：SDS 123 将变为

SDS
123

我已经尝试了几个在堆栈溢出中找到的类似答案，但仍然无法解决我的问题。你能帮忙吗？由 JSFIDDLE 提供，将不胜感激！

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
      .text(function(d) { return d.NickName ; })
      .style("fill-opacity", 1e-6);

谢谢！！

【问题讨论】：

标签： svg d3.js

【解决方案1】：

我遇到了类似的问题，所以我不得不做一些手工工作。首先，您需要一个真正“包装”文本的函数：

function wordwrap(text, max) {
  var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
  var lines = [];
  var line; 
  while ((line = regex.exec(text))!="") {lines.push(line);} 
  return lines
}

然后，您需要将此函数应用到每个文本元素。在你的代码中，我会这样写：

nodeEnter.append("text")
  .attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
   .style("fill-opacity", 1e-6)
   .each(function (d) {
       if (d.NickName!=undefined) {
          var lines = wordwrap(d.NickName, 15)
          for (var i = 0; i < lines.length; i++) {
             d3.select(this).append("tspan")
                 .attr("dy",13)
                 .attr("x",function(d) { 
                      return d.children1 || d._children1 ? -10 : 10; })
                  .text(lines[i])
           }
        }
});

最终结果是这样的：

当然，您应该花一些时间调整每个文本元素的x 位置。

编辑一种更简单的方法是将 wordwrap 方法设置为：

function wordwrap2(text) {
   var lines=text.split(" ")
   return lines
}

并像下面这样应用它：

nodeEnter.append("text")
  .attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
   .style("fill-opacity", 1e-6)
   .each(function (d) {
       if (d.NickName!=undefined) {
          var lines = wordwrap2(d.NickName)
          for (var i = 0; i < lines.length; i++) {
             d3.select(this).append("tspan")
                 .attr("dy",13)
                 .attr("x",function(d) { 
                      return d.children1 || d._children1 ? -10 : 10; })
                  .text(lines[i])
           }
        }
});

这是最后一种方法的小提琴：http://jsfiddle.net/mEyQW/59/

希望这会有所帮助。

【讨论】：

这只是我问题的完美答案！！谢谢！！

【解决方案2】：

我很难用逗号分隔一行并将文本片段以列表格式放置。以下改编奏效了。

 function splitoncomma(text) {
   var lines=text.split(",") //splits text on comma
   return lines
}

   label.append("div")
          .attr("class", "class_name")
          .each(function (d) {
            if (textValue(d)!==undefined) {
              var lines = splitoncomma(textValue(d))
              for (var i = 0; i < lines.length; i++) {
                d3.select(this)
                .append("text")
                .append("tspan")
                .style("float","left")// the float:left avoids default inline positioning
                .text(lines[i])
       }
    }

需要样式左浮动以避免默认的内联放置。

【讨论】：