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

问题:

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

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 

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)

回答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/

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