Question

我已经修改了Mike Bostock的动画堆栈（seen here），现在已经工作了一段时间。根据其他人的建议，我一直在尝试将我的所有D3版本3图表转换为版本4，因此所有内容都可以向前兼容。

不幸的是，我似乎无法弄清楚为什么这段代码不能编译。它正在抛出“Uncaught TypeError”。我被告知这与需要将数组传递给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; });

如何在D3版本4下正确完成？

编辑：我还找到了this link to a support request on github，但似乎没有人可以简单地解释如何转换此图表。

Answer 1

D3 v4 d3.stack()构造函数没有values，x，y和out个链接方法。这是第3版的语法。检查文档here。查看堆积条形图的this example。请注意，d3.stack在此示例中使用：

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

更新：我将问题中提到的Mike Bostock改写为d3 v4的“bl.ocks”。看看这个小提琴 - https://jsfiddle.net/levvsha/vrbq7ebz/

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

1 个答案: