title: D3, nested appends, and data flow
body: <p>I'm in the process of finally learning D3, and I stumbled upon a problem that I haven't been able to find an answer to. I'm not certain if my question is because I'm not thinking idiomatically with the library, or if it is because of a procedure that I am currently unaware of. I should also mention that I've only started doing web-related things in June, so I'm fairly new to javascript.</p>
  
  <p>Say that we're building a tool that gives a user a list of foods with respective images. And lets add on the additional constraint that each list item needs to be labeled by a unique ID so that it can be linked to another view. My first intuition to solve this is to create a list of <code>&lt;div&gt;</code>'s each with their own ID, where each <code>div</code> has its own <code>&lt;p&gt;</code> and <code>&lt;img&gt;</code>. The resulting HTML would look something like:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div id="chocolate"&gt;
    &lt;p&gt;Chocolate Cookie&lt;/p&gt;
    &lt;img src="chocolate.jpg" /&gt;
  &lt;/div&gt;
  &lt;div id="sugar"&gt;
    &lt;p&gt;Sugar Cookie&lt;/p&gt;
    &lt;img src="sugar.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The data for this tool is in a JSON array, where an individual JSON looks like:</p>
  
  
  
  <pre><code>{ "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }
  </code></pre>
  
  <p>Is there a way to do generate the HTML in one fell swoop? Starting with a base case of adding a div, the code might look something like:</p>
  
  <pre><code>d3.select(containerId).selectAll('div')                                                          
     .data(food)
     .enter().append('div')
     .attr('id', function(d) { return d.label; });
  </code></pre>
  
  <p>Now, what about adding a <code>&lt;div&gt;</code> with a <code>&lt;p&gt;</code> in it? My original thought was to do something like:</p>
  
  <pre><code>d3.select(containerId).selectAll('div')                                                          
     .data(food)
     .enter().append('div')
     .attr('id', function(d) { return d.label; })
         .append('p').text('somethingHere');
  </code></pre>
  
  <p>But, I see two problems with this: (1) how do you get the data from the <code>div</code> element, and (2) how can you append multiple children to the same parent in one declarative chain? I can't think of a way to make the third step where I would append on the <code>img</code>.</p>
  
  <p>I found mention of nested selection on another post, which pointed to <a href="http://bost.ocks.org/mike/nest/" rel="noreferrer">http://bost.ocks.org/mike/nest/</a>. But is nested selection, and therefore breaking apart the appends into three chunks, appropriate/idiomatic for this situation? Or is there actually a well-constructed way to form this structure in one chain of declarations? It seems like there might be a way with subselections mentioned on <a href="https://github.com/mbostock/d3/wiki/Selections" rel="noreferrer">https://github.com/mbostock/d3/wiki/Selections</a>, but I'm not familiar enough with the language to test that hypothesis.</p>
  
  <p>From a conceptual level, these three objects (<code>div</code>, <code>p</code>, and <code>img</code>) are treated more like one group rather than separate entities, and it would be nice if the code reflected that as well.</p>