score:3

Accepted answer

The problem is that the text is already devoid of space when you try to a split on the basis of whitespace (for second time on-wards).

So instead of doing

words = text.text().split(/\s+/).reverse(),

do it this way

words = d3.select(this).data()[0].name.split(/\s+/).reverse(),

working example here

score:1

The problem is that you are using wrap again and again in the same text. This is what I did:

First, I changed the class of any new text to newText:

  nodeEnter.append("text")
    .attr("x", function(d) {
      return d._children ? -0 : 8;
    })
    .attr("y", 3)
    .attr("dy", "0em")
    .attr("text-anchor", "middle")
    .attr("class", "newText")
    .text(function(d) {
      return d.name;
    })

  wrap(d3.selectAll('.newText'),150);

And then, in the function click, I changed the class of all texts:

    function click(d) {

  if (d.children) {
    d._children = d.children;
    d.children = null;

  } else {
    d.children = d._children;

  }
  d3.selectAll("text").attr("class", "text");
  update(d);
}

Related Query

More Query from same tag