CODEWITHSUNDEEP
javascriptd3.js
lebadget
lebadget

Reputation: 23

Stack and nest not working converting v3 to v4

I'm converting Mike Bostock's original Stacked Area Chart via Nest example to d3 v4, but I'm apparently not getting something right when calling stack(nest.entries(data))

I have a working v3 codepen here - https://codepen.io/lebadget/pen/ypLZpJ

And the busted v4 codepen here - https://codepen.io/lebadget/pen/VywgxG

Can anyone help me understand why v4 returns an empty array for layers (line 121 is where it's going bad).

UPDATE:

I've narrowed it down to this:

// v3 const groupedData = nest.entries(data); var layers = stack(groupedData); console.log('layers', layers);

"layers" [Object] yay, it works!

// v4 const groupedData = nest.entries(data); var layers = stack(groupedData); console.log('layers', layers);

"layers": [] nothing

Upvotes: 1

Views: 232

Answers (1)

twgonzalez
twgonzalez

Reputation: 26

I saw your request for help on the D3 group thread for issue tracking and took a look at your code here.

My understanding is that Stack (D3 v4) requires a transposed data set to be passed to it. Where each row of data represents all the value plots for a given 'stack' with each key present on that row object. In your code, you have the data grouped by series (Group1, Group2, Group3), when you need it to be grouped by Row.

Check out Mike's documentation on this, specifically the section that shows how the data is being passed into the stack:

   var data = [
     {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
     {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
     {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
     {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
  ];

https://github.com/d3/d3-shape/blob/master/README.md#_stack

Cheers,

Tom

Upvotes: 1

Related Questions