如何修复d3plus中每个文本元素的文本换行？

Question

我尝试遵循有关使用d3plus进行文本包装的说明和步骤，但是我的文本未能包装。我不确定问题是什么，因为我没有收到任何错误反馈，并且没有为每个具有相应ID的文本生成tspan。

这是我正在设计的表/网格。并且我正在尝试移动文本，以便减小网格中每个矩形的宽度。

// apply columns

var column = row.selectAll(".column")
  .data(function(d) { return d; })
  .enter().append("g")
  .attr("class","column")
  .append("rect")
  .attr("x",function(d) {//console.log("d.x = "+ d.x);
   return d.x; })// corresponds to task
  .attr("y",function(d) {//console.log("d.y = "+ d.y);
  return d.y; })// corresponds to user
  .attr("width",function(d) {return d.width;})
  .attr("height",function(d) {return d.height;})
  .attr("class","square")
  .style("fill",function(d) { 
    var x = (d.x - 1)/width;
    update_x = d.x;
    update_y = d.y;
    var y = (d.y - 1)/height;
    if(x != 0 && y != 0 ){ // if it's not a bordering on the top or bottom
      if(db[x][y] == 0){ // 0 is white
        return "#e5e5ff";
      }
      else if(db[x][y] > 0 && db[x][y] <= 3){
        return "#9999ff"; //light blue
      }
      else if(db[x][y] > 3 && db[x][y] <= 6){
        return "#6666ff"; // slightly darker blue
      }
      else{
        return "#3232ff";
      }
    }else{
      return "grey";
    }
     })
  .style("stroke","white")
  .style("stroke-width","3")
  .on('click',function(d){
    var x = (d.x - 1)/width;
    var y = (d.y - 1)/height;

    if(x == 0 || y == 0){
      // disable click function
    }
    else{
      if(db[x][y] != 0){
         // use local storage to store variables for the next page
          x_result = x;
          y_result = y;
          localStorage.setItem("Task_ID",y_result);
          localStorage.setItem("User_ID",x_result);
          //store db on local storage too
        document.location.href = "results.html";
      }
    }
  })
  .on("mouseover",function(d){// change color of cell.
    var x = (d.x - 1)/width;
    var y = (d.y - 1)/height;
    if(x == 0 || y == 0){
      // disable color change for border functions
    }
    else{
      if(db[x][y] != 0){
        this.style.fill ="yellow";
        this.style.stroke ="orange";
      }
    }
  })
  .on("mouseout",function(d){// change color of cell.
    var x = (d.x - 1)/width;
    var y = (d.y - 1)/height;
    if(x == 0 || y == 0){
      // disable color change for border functions
    }
    else{
      if(db[x][y] == 0){ // 0 is white
        this.style.fill ="#e5e5ff";
      }
      else if(db[x][y] > 0 && db[x][y] <= 3){
        this.style.fill ="#9999ff"; //light blue
      }
      else if(db[x][y] > 3 && db[x][y] <= 6){
        this.style.fill ="#6666ff"; // slightly darker blue
      }
      else{
        this.style.fill ="#3232ff";
      }
      this.style.stroke = "white"; //revert back to original stroke color
    }
    }
  );

  var text = row.selectAll(".column")
  .append("text")
  .attr("id","rectWrap")
  .attr("x",function(d) {
    var x = (d.x - 1)/width;
    var y = (d.y - 1)/height; 
    if(x == 0 || y == 0){
      return d.x +10;
    }
    else{
      return d.x +80;
    } 
  })
  .attr("y",function(d) {d_y = d.y; return d_y + 60; })
  .attr("font-size", "15px")
  .attr("fill","black")
  .text(function(d){
    var x = (d.x - 1)/width;
    var y = (d.y - 1)/height;
    if(x == 0 && y == 0){
      return "";
    }
    else if(x == 0 || y == 0){
      return db[x][y];
    }
    else{
      if(db[x][y] == 0){
        return "";
      }
      else if(db[x][y] == 1){
        return db[x][y].toString() +" file found";
      }
      else{
        return db[x][y].toString() +" files found";
      }
    }
  })
  .each(function(d){
    d3plus.textwrap()
    .container(d3.select(this))
    .draw();
  });
})

我希望text元素为词组中的每个单词生成一个tspan。