{d3.js} Migration v3 v4: Code Arbeit auf v3 (d3.layout.stack()) Fehler v4 (d3.stack())

Question

Ich versuche, D3 zu migrieren von v3 v4:

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

See: d3.layout.stack ↦ d3.stack

ich meinen Arbeits Code geändert:

-Code auf v3 arbeiten: (d3.layout.stack())

-Code Herstellung Fehler 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 < 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; 

Screenshot des Arbeitscodes in v3:

Screenshot von Die Arbeitenden Code (D3 v3) console.log (Schichten)

Screenshot der (D3 v4) console.log (Schichten)

Answer 1

Es stellte sich heraus, es ist eigentlich ganz einfach.

Sie wollen einfach Ihre Matrix transponieren, so dass es wie Somethings aussieht ist das das Array von Objekten der Nähe ist die neue Stack-Funktion für wartet:

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

Dann ist es einfach eine Frage der Ändern der Namen gemäß der neuen Syntax.

Ich habe deine Fidel so aktualisiert, dass sie für v4 funktioniert.

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