title: add a sub element in d3js using data binding
body: <p>I have a table data like </p>
  
  <ul>
  <li>ID, Name, Value</li>
  <li>001, ABC, 123</li>
  <li>002, DEF, 345</li>
  </ul>
  
  <p>and I would like to display it like:</p>
  
  <pre><code>&lt;div id="001"&gt;
  &lt;h1&gt;ABC&lt;/h1&gt; &lt;p&gt;123&lt;/p&gt;
  </code></pre>
  
  <p>I tried the following:</p>
  
  <pre><code>var divs = root.selectAll("div").data(data)
              .enter()
              .append("div")
              .attr("id", function (d) { return d.ID; })
              .append("h1")
              .text(function (d) { return d.Name; })
              .selectAll("div p").data(function (d) { return d; })
              .enter().append("p")
              .text(function (d) { return d.Value; })
  </code></pre>
  
  <p>However it only display the first level. I tried a few other options but was unsuccessful, either display nothing or display all values in each element.</p>
  
  <p>I have the feeling I am missing something obvious, any pointer would be appreciated.</p>