Databases
StackOverflow2013
Postsdbo
POD3, nested appends, and data flow
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3, nested appends, and data flow
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoshua Taylor
    1. USConnor Gramazio
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POD3, nested appends, and data flow
      1. USpbh101
      1. VTFavorite
    2. VO
      singulars
      1. POD3, nested appends, and data flow
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POD3, nested appends, and data flow
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload