{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.

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/