javascript - 如何在 d3.js 中将文本分成 2 行

Question

我有这个代码

.text(function(d){return d.name});

现在我想检查 d.name 的长度，如果它超过 10 个将它分成两行我写了这段代码，但它不起作用

    var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
    var name1="asdsdadasdasdas";
  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -40 : -25; })
      .attr("dy",function(d){return d.children || d._children ? "-2em" : "2em"})
      .attr("text-anchor", "end")
      .attr("height",50)
      .attr("width",50)
      .text(function(d){
          var str=d.name;
          if(str.length>10){
            var txt1=str.slice(0,10);
            txt1+="<br/>";
            txt2=str.slice(10,str.length);
            return txt1+txt2;
          }else{
          return d.name;
          }
      })
      .attr("transform",function(d){
          return "rotate(45)";
          })
      .style("fill-opacity", 1e-6);

Answer 1

使用选择html方法而不是text. 所以：

selection.html(function(d){
  var str=d.name;
  if(str.length>10){
        var txt1=str.slice(0,10);
    txt1+="<br/>";
    txt2=str.slice(10,str.length);
    return txt1+txt2;
   }
  return d.name;
});

Answer 2

你else在 if 语句中失踪了。

$(document).ready(function () {
    var str = 'somelongtesxtthat';
    if (str.length > 10) {
        var txt1 = str.slice(0, 10);
        txt1 += "<br/>";
        var txt2 = str.slice(10, str.length);
        alert(txt1 + txt2);
    } else {
        alert(str);
    }
});