{d3.js} 迁移 v3 到 v4:代码在 v3 (d3.layout.stack()) 错误 v4 (d3.stack()) 上工作 [英] {d3.js} migration v3 to v4: code work on v3 (d3.layout.stack()) error v4 (d3.stack())

问题描述

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

阅读:

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.stack ↦ d3.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 < 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 of the working code in v3:

Screenshot of the working code (D3 v3) console.log(layers)

Screenshot of the (D3 v4) console.log(layers)

解决方案

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} 迁移 v3 到 v4:代码在 v3 (d3.layout.stack()) 错误 v4 (d3.stack()) 上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！