D3 Multiline Labels

multilinelabels.js

d3.selection.prototype.wrappedText = function(width) {
  this.each(function(d) {
    var text = d3.select(this);
    if(text.text() === ""){ return this; }
    var words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        x = text.attr("x"),
        dy = 0;
    var tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width(d)) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
};


//example
bubbles.append("text")
    .attr("x", function(d){ return d.x; })
    .attr("y", function(d){ return d.y + 5; })
    .attr("text-anchor", "middle")
    .text(function(d){ return d.data["Name"]; })
    .style("fill","white")
    .style("font-family", "san-serif")
    .style("font-size", "10px")
    .wrappedText(function(d){ return d.r * 2; }); //radius of bubble