d3.js stack layout upgrading from v3 to v4 - d3.js

Question

Using D3 v3, I formatted my data to match Mike's example to quick start my dev process. Example page here https://github.com/d3/d3-3.x-api-reference/blob/master/Stack-Layout.md
var data = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
];
Then all i had to do to obtain the stacked values was
var stack = d3.layout.stack().values(d=>d.values)
var layers = stack(data)
Exactly how he did it in his example.
However, in v4 it seems like the stack function expects tabular formatted data, so the above data would look like this.
var data = [
{x: 0, apples: 91, oranges: 9},
{x: 1, apples: 290, oranges: 49},
];
Is there an easy way to keep my data format and use the v4 stack function? I can't seem to grok the new way to do this. In my current data format, i have useful properties associated with the values array. If i change my data format to tabular, I don't see a convenient way to pair properties with values.

Answer 1

I've been having the same problem. Unfortunately, the new way doesn't seem to match the way APIs serialize model instances (sort of like your original data); instead you're stuck with JSONified tabular data format. I feel like this works when you're working with csv dumps, but that's not generally how databases are organised.
I've posted a related answer here that transforms object-grouped format (eg by fruit in your example) into data-point format (by x-coordinate in your example) as expected by d3.stack(). You'll be able to adapt the code to your particular case.