将stack（）调用从v3转换为v4

Question

I've had a modified version of Mike Bostock's animated stack ( seen here ) working for awhile now. On the advice of others here I've been trying to convert all of my D3 version 3 charts to version 4, so everything is compatible moving forward.

Unfortunately, I can't seem to figure out why this code segment won't compile. It's throwing the "Uncaught TypeError". Which I've been told has to do with the newer version wanting an array passed to stack().

var stack = d3.stack()
    .values(data, function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; })
    .out(function(d, y0) { d.valueOffset = y0; });

How should this be done correctly under D3 version 4?

Edit: I also found this link to a support request on github , but it seems no one over there could simply explain how to convert this chart either.

Answer 1

D3 v4 d3.stack() constructor don't have values , x , y and out chaining methods. It's syntax for 3rd version. Check docs here . Look at this example of stacked bar chart. Note, as d3.stack uses in this example:

...
  g.append("g")
   .selectAll("g")
   .data(d3.stack().keys(keys)(data))
   .enter().append("g")
...

Update: I rewrote "bl.ocks" by Mike Bostock mentioned in the question to the d3 v4. Look at this fiddle - https://jsfiddle.net/levvsha/vrbq7ebz/