title: How can I wrap the long label text in the bubble chart in d3?
body: <p>I'm using D3 version 3, I'm very new to D3, like today is my day 2 for d3.......I need to do this project put each category in bubble....I was given the following D3 codes from class, professor said just change the data set to make it work....but my data label is way too long to fit in each bubble....Due to I have 0 knowledge about D3, although I did found some codes about how to wrap the text, but I have no idea how to put it there. Please help~~</p>
  
  <p>This is the D3 version 3 codes given by professor:</p>
  
  <pre><code>var diameter = 800, //max size of the bubbles
     color = d3.scale.category20(); //color category
  
  var bubble = d3.layout.pack()
  .sort(null)
  .size([diameter, diameter])
  .padding(1.5);
  
  var svg = d3.select("section")
  .append("svg")
  .attr("width", diameter)
  .attr("height", diameter)
  .attr("class", "bubble");
  
  d3.csv("data.csv", function(error, data){
  
  //convert numerical values from strings to numbers
  data = data.map(function(d){ d.value = +d["Amount"]; return d; });
  
  //bubbles needs very specific format, convert data to this.
  var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });
  
  //setup the chart
  var bubbles = svg.append("g")
      .attr("transform", "translate(0,0)")
      .selectAll(".bubble")
      .data(nodes)
      .enter();
  
  //create the bubbles
  bubbles.append("circle")
      .attr("r", function(d){ return d.r; })
      .attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; })
      .style("fill", function(d) { return color(d.value); });
  
  //format the text for each bubble
  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["Item"]; })
      .style({
          "fill":"white", 
          "font-family":"Verdana, san-serif",
          "font-size": "12px"
      });
  })
  </code></pre>
  
  <p>And this is my data.csv that I'm using:</p>
  
  <pre><code>Item,Amount
  Daily Phone Pick-ups on Average: 183 Counts ,182
  Daily Screen Time: 401 minutes,401.4
  Daily Walking &amp; Running Distance: 0.188 miles,188.36
  Daily Steps: 44 Counts,448
  Daily Flights Climbed: 39 Counts,393
  </code></pre>
  
  <p>Thanks a lot!!</p>