title: SVG text elements piling on top of one another at the 0,0 position - D3
body: <p>I created many SVG text elements for a map I'm making in D3.
  They show up in my Document as grand-children to the Body and as children to an SVG container I created.</p>
  
  <p>See here: <a href="http://i.stack.imgur.com/Gy5mS.png" rel="nofollow">my DOM</a></p>
  
  <p>However, every element piles on top of the other, stuck at the 0,0 position.
  Interestingly, when the text elements are OUTSIDE of the body, they render fine.</p>
  
  <p>Here's how I generated the elements using D3...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var a=["", "Albany Park", "Archer Heights", "Armour Square", "Ashburn", "Auburn Gresham", "Austin", "Avalon Park", "Avondale", "Belmont Cragin", "Beverly", "Bridgeport", "Brighton Park", "Burnside", "Calumet Heights", "Chatham", "Chicago Lawn", "Clearing", "Douglas", "Dunning", "East Garfield Park", "East Side", "Edgewater", "Edison Park", "Englewood", "Forest Glen", "Fuller Park", "Gage Park"];
  
  var canvas = d3.select("body") //select the body
              .append("svg") //append an svg container
              .attr("id", "drawingBoard") //give that container an id
              .attr("height", 600) //specify dimensions
              .attr("width", 600)
  
  canvas.selectAll("#drawingBoard")
      .data(a)
      .enter() //make as many potential elements as there are data items
      .append("text") //make those potential elements real
      .style("font-family", "Calibri", "sans-serif")
      .style("font-size", ".6em")
      .html(function(x){return x+ "&lt;br&gt;"}); //Populates the new elements with text.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;title&gt;En Route to D3, SVG, and Javascript Mastery&lt;/title&gt;    
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script      src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;   
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>