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

Question

我正在尝试将D3从v3迁移到v4:

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

见: d3.layout.stack↦d3.stack

我改变了我的工作代码:

在v3上运行的代码: (d3.layout.stack())

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;

错误:SCRIPT5007:无法设置未定义或空引用的属性"dvnum"

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;

v3中工作代码的屏幕截图:

工作代码(D3 v3)console.log(图层)的屏幕截图

(D3 v4)console.log(图层)的屏幕截图

Answer 1

事实证明，这实际上很容易。

您只想转置矩阵，使其看起来接近新堆栈函数正在等待的对象数组：

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); }))),

然后根据新语法修改名称就很简单了。

我更新了你的小提琴，使其适用于 v4。

请参阅： https: //jsfiddle.net/9y2g65qc/20/