javascript - 具有 2 级嵌套的多线图，从 v4 到 v5 的转换问题

Question

所以我正在尝试创建这个（https://bl.ocks.org/ProQuestionAsker/952a0699278d1bdfda36d4b7175924d3）精确图表，但在 d3 版本 5 中，我不确定我在这里做错了什么。基本上我试图总共制作 4 行，数据中有 2 种水果类型和 2 年。

这就是我筑巢的方式：

        var nest = d3.nest()
            .key(function(d){ return d.fruit; })
            .key(function(d){ return d.year; })
            .entries(data); 

这就是我尝试制作路径的方式：

var fruits = svg.selectAll(".fruits")
            .data(nest)
            .enter()
            .append("g"); 

        var paths = fruits.selectAll("path")
            .data(function(d) { return d.values; })
            console.log(d)
            .enter()
            .append("path"); 

        paths
            .attr("d", function(d){
                return valueLine(d.values); 
            }); 

我被困在这里，因为我尝试了多种不同的方式重新格式化它，但仍然没有画线。我想也许我只是从 v4 转换到 v5 的问题。提前感谢您的宝贵时间。

这是我的代码到 codepen 项目的链接：https ://codepen.io/amandaraen/project/editor/DOgwYn#0

标签： javascriptd3.js