{d3.js} di chuyển v3 sang v4: mã hoạt động trên v3 (d3.layout.stack()) lỗi v4 (d3.stack())

Question

Tôi đang cố di chuyển D3 từ v3 sang v4:

đọc: https://github.com/d3/d3/blob/master/CHANGES.md#shapes-d3-shape

Xem: d3.layout.stack ↦ d3.stack

tôi đã thay đổi mã làm việc của tôi:

mã làm việc trên v3: (d3.layout.stack())

Mã sản xuất lỗi trong 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; 

Ảnh chụp màn hình của đoạn code làm việc trong v3:

Ảnh chụp màn hình của làm việc mã (D3 v3) console.log (lớp)

Ảnh chụp màn hình của (D3 v4) console.log (lớp)

Answer 1

Hóa ra, nó thực sự khá dễ dàng.

Bạn chỉ đơn giản là muốn transpose ma trận của bạn để nó trông giống như somethings đó là gần với mảng các đối tượng Stack có chức năng mới đang chờ đón:

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

Sau đó, nó là một vấn đề đơn giản của sửa đổi tên theo cú pháp mới.

Tôi đã cập nhật fiddle của bạn để nó hoạt động cho v4.

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