d3: layout.stack() -- Precise Shape of Default Layers Array
<p>I have a dataset whose raw form looks like this:</p>

<p>12:00, 1, 2, 3, 4, 5, 6, 7
12:15, 8, 9, 10, 11, 12, 13, 14
...</p>

<p>It's a time series, with 6 columns of values. For each time point, I want to create a stacked bar chart in d3.</p>

<p>From reading the documentation for d3.layout.stack(), I thought that the 'normal' form of data expected by stack() was like this:</p>

<pre><code>[
    [
        { x: 12:00, y: 1 },
        { x: 12:00, y: 2 },
        ...
    ],
    [
        &lt;repeat for time point 12:15&gt;
    ],
    ...
]
</code></pre>

<p>Since I am using 15 minute intervals, the outer array would have 96 elements (it spans one day) and each inner array would have 7 elements, with one point value for each segment.</p>

<p>Unfortunately, when I pass that 'normalized' dataset to d3.layout.stack(), it doesn't work.</p>

<p>I'm using the following code to generate layers:</p>

<pre><code>layers.selectAll( 'rect' )
    .data( segments )
    .enter()
    .append( 'rect' )
    .attr( 'x', function ( d, i ) {
        return xScale( d[0].x );
    } )
    .attr( 'y', function ( d, i ) {
        return yScale( d[i].y0 + d[i].y );
    } )
    .attr( 'height', function ( d, i ) {
        return yScale( d[i].y0 ) - yScale( d[i].y + d[i].y0 );
    } )
    .attr( 'width', xScale.rangeBand() - 1 );
</code></pre>

<p>The function call to generate the x values works correctly, and is called 96 times (once for each time point). However, the function call to generate the y values is also called 96 times, but the array that's passed in as the 'd' parameter only contains 7 values, since there are only 7 segments.</p>

<p>I tried 'normalizing' the data so that the outer array had 7 elements, one for each segment, and the inner arrays had 96 elements, one for each time point. But in that case, the function call defining 'x' only gets called seven times.</p>

<p>I'm sure I'm missing something obvious, but would appreciate either some help or some links to good, thorough examples. All the ones I've googled so far either leave things out, or describe the 'shape' of the data being passed to layout.stack() in words, which is not helpful for those of us who lean towards learning visually :).</p>

<p><strong>Edits</strong></p>

<ul>
<li>The data is from an angular call made against an ASPNET 5/MVC6 site.</li>
<li>There is no row of field names in the data. Is that a requirement? I 
don't recall seeing that in the d3 docs.</li>
</ul>