title: d3 rect not showing up
body: <p>I want to display the legend (caption?) of some data.
  For each part of the legend, I append a rect and a p to a parent division.
  The problem is that rect are not showing up.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var groups = {{ groups|safe }};
  groups.forEach(function(group, i) {
      var div = d3.select("#collapse-legend");
      div.append("rect")
          .attr("width", 17)
          .attr("height", 17)
          .style("fill-opacity", 1)
          .style("fill", function (d) { return c(i); });
      div.append("p").text(group)
  });
  </code></pre>
  
  <p>Now, when I check the content of my web page, I get both rect and p, but rect:</p>
  
  <ol>
  <li>is not showing up</li>
  <li>seems to have a width of 0 (showing its area with firefox)</li>
  </ol>
  
  <p>Is there some mistake in my code? Are there better ways to achieve this? I am very new to javascript and d3.js so please be indulgent ^^</p>
  
  <h1>Update</h1>
  
  <p>So this is what I ended with.<br>
  HTML:</p>
  
  <pre><code>&lt;div ...&gt;
      &lt;svg id="legend-svg"&gt;&lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// set height of svg
  d3.select("#legend-svg").attr("height", 18*(groups.length+1));
  
  // for each group, append rect then text
  groups.forEach(function(group, i) {
      d3.select("#legend-svg").append("rect")
          .attr("y", i*20)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill-opacity", 1)
          .style("fill", function (d) { return c(i); });
      d3.select("#legend-svg").append("text")
          .attr("x", 25)
          .attr("y", i*20+15)
          .text(group);
  });
  </code></pre>