Многострочная диаграмма с двухуровневым вложением, задача преобразования из 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