D3.js - How can I add a new line to the text in this Collapsible Tree?

Question

I have a Collapsible Tree built by D3. Here is the JSFIDDLE:http://jsfiddle.net/mEyQW/57/

As you can see, when the nodes fully expended, the text were all overlapped

Answer 1

I had a hard time to split a line on comma and place the text pieces in a list format. The following adaptation worked.

 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])
       }
    }

The style float left is required to avoid default inline placement.