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