title: SVG foreignObject text not showing
body: <p>I've already looked at this - <a href="https://stackoverflow.com/questions/11194403/svg-foreignobject-not-showing-in-chrome">SVG foreignObject not showing in Chrome</a></p>
  
  <p>and it did not answer my question. I have text in a foreign object in SVG and it is not showing.</p>
  
  <p>This is my code.</p>
  
  <pre><code>        var svg = d3.select("#chart").append("svg").attr('width', width).attr('height', height);
  
          var cell = svg.selectAll("g")
              .data(nodes)
              .enter().append("g")
              .attr("class", "cell");
  
          cell.append("rect")
              .attr("class", "node")
              .attr("x", function(d) { 
                  return x(d.x); })
              .attr("y", function(d) { 
                  return y2(d.y); })
              .attr("width", function(d) { 
                  return x(d.dx); })
              .attr("height", function(d) { 
                  return y2(d.dy); })
              .style("fill", function(d) { 
                  var test = (d.children ? d : d.parent).name;
                  console.log(test);
                  return color(Math.random());; 
              })
  
          cell.append("foreignObject")
              .attr("class", "foreignObject")
              .attr("width", function(d) {
                  return d.dx;
              })
              .attr("height", function(d){
                  return d.dy;
              })
              .attr("transform", function(d) {
                  return "translate(" + x(d.x + d.dx/2) + "," + (y2(d.y)) + ") rotate(90)";
              })
              .append("xhtml:body")
              .attr("class","label")
              .append("div")
              .text(function(d){
                  return d.name;
              })
              .attr("text-anchor", "middle");
  </code></pre>
  
  <p>I have the text inside of a body tag (as the other answer says), but I still don't see the text. It looks like the container div has no height, although I'm explicitly setting the height. </p>
  
  <p>What's going on? </p>