{d3.js} migration v3 to v4: code work on v3 (d3.layout.stack()) error v4 (d3.stack())

Question

I'm trying to migrate D3 from v3 to v4:

Read: https://github.com/d3/d3/blob/master/CHANGES.md#shapes-d3-shape

See: d3.layout.stack ? d3.stack

I changed my working code:

Code working on v3: (d3.layout.stack())

Code producing error in v4: (d3.stack())

V4:

var dvstack = d3.stack(); 
var layers = dvstack(d3.range(nLocal).map(function(d,i) { ...
console.log(dvstack);

function stack(data) {

 var kz = keys.apply(this, arguments),
     i,
     m = data.length,
     n = kz.length,
     sz = new Array(n),
     oz;

 for (i = 0; i < n; ++i) {
   for (var ki = kz[i], si = sz[i] = new Array(m), j = 0, sij; j < m;++j) {
     si[j] = sij = [0, +value(data[j], ki, j, data)];
     sij.data = data[j];
   }
   si.key = ki;
 }

 for (i = 0, oz = order(sz); i < n; ++i) {
   sz[oz[i]].index = i;
 }

 offset(sz, oz);
 return sz;    }

layers[c].dvnum = c;

Error: SCRIPT5007: Unable to set property 'dvnum' of undefined or null reference

V3:

var stack = d3.layout.stack(); 
var layers = stack(d3.range(nLocal).map(function(d,i) { ...
console.log(stack);

function stack(data, index) {

 if (!(n = data.length)) return data;
 var series = data.map(function(d, i) {
   return values.call(stack, d, i);
 });
 var points = series.map(function(d) {
   return d.map(function(v, i) {
     return [ x.call(stack, v, i), y.call(stack, v, i) ];
   });
 });
 var orders = order.call(stack, points, index);
 series = d3.permute(series, orders);
 points = d3.permute(points, orders);
 var offsets = offset.call(stack, points, index);
 var m = series[0].length, n, i, j, o;
 for (j = 0; j < m; ++j) {
   out.call(stack, series[0][j], o = offsets[j], points[0][j][1]);
   for (i = 1; i < n; ++i) {
     out.call(stack, series[i][j], o += points[i - 1][j][1], points[i][j][1]);
   }
 }
 return data;    }

layers[c].dvnum = c;

Screenshot of the working code in v3:

Screenshot of the working code (D3 v3) console.log(layers)

Screenshot of the (D3 v4) console.log(layers)

Answer 1

Turns out, it's actually quite easy.

You simply want to transpose your matrix so that it's looks like somethings which is close to the array of objects the new stack function is waiting for:

var n = 4, // number of layers
m = 58, // number of samples per layer
stack = d3.stack().keys([0,1,2,3]);
stack.value(function (d, key) {
      return d[key].y;
});
var layers = stack(d3.transpose(d3.range(n).map(function() { return bumpLayer(m, .1); }))),

Then it's a simple matter of modifying the names according to the new syntax.

I updated your fiddle so that it works for v4.

see: https://jsfiddle.net/9y2g65qc/20/