title: How to make sure text in treemap cell do not overflow?
body: <p><a href="http://bl.ocks.org/mundhradevang/1387786" rel="nofollow noreferrer">http://bl.ocks.org/mundhradevang/1387786</a></p>
  
  <p>Something similar like this. But I have lots of data so the text is a LOT. So what is the best way to make sure each individual text wraps nicely inside the treemap cell?</p>
  
  <p>I use <a href="https://github.com/iros/underscore.nest" rel="nofollow noreferrer">https://github.com/iros/underscore.nest</a> underscore.nest to nest my JSON data so it looks like this</p>
  
  <pre><code>{"children":[{"name":"Afghanistan",
   "children":[{"name":"Qal eh-ye Now","value":2997},
   {"name":"Mahmud-E Eraqi","value":7407}
  </code></pre>
  
  <p>But when drawing my treemap, the text are all over the place,
  <a href="https://i.stack.imgur.com/eBOE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBOE6.png" alt="enter image description here"></a></p>
  
  <p>This is my D3 code to append the text :</p>
  
  <pre><code> cells
  .append("text")
  .attr("x", function (d) {
    return d.x + d.dx / 2;
  })
  .attr("y", function (d) {
    return d.y + d.dy / 2;
  })
  .attr("text-anchor", "middle")
  .text(function (d) { return d.children ? null : d.name })
  </code></pre>
  
  <p><strong>Full Dataset:</strong>
  <a href="https://api.myjson.com/bins/g9p4s" rel="nofollow noreferrer">https://api.myjson.com/bins/g9p4s</a></p>
  
  <p><strong>My Full Code</strong> :</p>
  
  <pre><code> var coordinates = { x: 0, y: 0 };
   var margin = { top: 40, right: 10, bottom: 90, left: 20 }
    var cfg = {
      margin: { top: 40, right: 10, bottom: 90, left: 140 },
      width: 960 - margin.left - margin.right,
      height: 500 - margin.top - margin.bottom,
      color: d3.scale.category20()
    };
  
    //Put all of the options into a variable called cfg
    if ('undefined' !== typeof options) {
      for (var i in options) {
        if ('undefined' !== typeof options[i]) { cfg[i] = options[i]; }
      }//for i
    }
  
    var treemap,
      legendCategories,
      uniqueCategories;
    var half = cfg.height / 2;
    var tool = d3.select("body").append("div").attr("class", "toolTip");
  
    /////////////////////////////////////////////////////////
    //////////// Create the container SVG and g /////////////
    /////////////////////////////////////////////////////////
  
  
    //Remove whatever chart with the same id/class was present before
    d3.select(id).select("svg").remove();
  
    //Initiate the radar chart SVG
    var canvas = d3
      .select(id)
      .append("svg")
      .attr("class", "chart")
      .attr("width", cfg.width + cfg.margin.left + cfg.margin.right)
      .attr("height", cfg.height + cfg.margin.top + cfg.margin.bottom)
      .attr("id", "canvas");
    var innercanvas = canvas
      .append("g")
      .attr("class", "innercanvas")
      .attr("transform", "translate(" + cfg.margin.left + "," + cfg.margin.top + ")");
  
    legendCategories = data.children.map(a =&gt; a.name);
    uniqueCategories = legendCategories.filter(onlyUnique);
  
    var categoryTitle = String(categoryKey);
    categoryTitle = categoryTitle.substring(categoryTitle.indexOf("." + 1));
    categoryScale = cfg.color;
    categoryScale.domain(uniqueCategories);
    verticalLegend = d3.svg
      .legend()
      .labelFormat("none")
      .cellPadding(5)
      .orientation("vertical")
      .units(categoryTitle)
      .cellWidth(20)
      .cellHeight(10)
      .place(coordinates)
      .inputScale(categoryScale)
      .cellStepping(10);
  
  
    treemap = d3.layout
      .treemap()
      .round(false)
      .size([cfg.width, cfg.height])
      .padding(.25)
      .sticky(true)
      .nodes(data);
  
    var cells = innercanvas
      .selectAll(".newcell")
      .data(treemap)
      .enter()
      .append("g")
      .attr("class", "newcell");
  
    cells
      .append("rect")
      .attr("x", function (d) {
        return d.x;
      })
      .attr("y", function (d) {
        return d.y;
      })
      .attr("id", "rectangle")
      .attr("width", function (d) {
        return d.dx;
      })
      .attr("height", function (d) {
        return d.dy;
      })
      .style("fill", function (d) {
        return d.children ? cfg.color(d.name) : null;
      })
      .attr("stroke", "#000000")
      .attr('pointer-events', 'all')
      .on("mousemove", function (d) {
        tool.style("left", d3.event.pageX + 10 + "px")
        tool.style("top", d3.event.pageY - 20 + "px")
        tool.style("display", "inline-block");
        tool.html(d.children ? null : d.name + "&lt;br&gt;" + d.value);
      }).on("mouseout", function (d) {
        tool.style("display", "none");
      });
  
    cells
      .append("text")
      .attr("x", function (d) {
        return d.x + d.dx / 2;
      })
      .attr("y", function (d) {
        return d.y + d.dy / 2;
      })
      .attr("text-anchor", "middle")
      .text(function (d) { return d.children ? null : d.name })
  
  
  
    canvas
      .append("g")
      .attr("transform", "translate(40,50)")
      .attr("class", "legend")
      .attr("id", "legend")
      .call(verticalLegend);
  
  
  
  
    function onlyUnique(value, index, self) {
      return self.indexOf(value) === index;
    }
  </code></pre>