如何使用 d3.js7.0.0 版从分类和数值数据创建轴？

如何解决如何使用 d3.js7.0.0 版从分类和数值数据创建轴？

上下文：我是 d3.js 的初学者，已经解决这个问题几天了；我已经解决了许多与此处类似问题有关的解决方案，但即使我尽可能地复制了这些解决方案，问题仍然存在。

我正在尝试使用这个简单的 CSV 文件创建一个包含两个轴的条形图：

Food,Yummy
Apples,6
Green Beans,10
Egg Salad Sandwich,8
Cookies,2
Liver,1
Burrito,5

我尝试使用以下代码创建条形图的轴（x 轴：食物，y 轴：美味）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="utf-8">
        <title>D3: Loading data from a CSV file</title>
        <script type="text/javascript" src="../d3.js"></script>
    </head>
    <body>
        <script type="text/javascript">

    //Defining svg dimensions
    width = 250;
    height = 600;
    margin = 20;

    //Creating svg element
    var svg = d3.select("body")
                .append("svg")
                .attr("height",height)
                .attr("width",width);

    //Loading csv data
    rowConverter = function(d) {
      return {
        Food: d.Food,Yummy: +d.Yummy
      };
    }

    data = d3.csv("food.csv",rowConverter).then(function(data) {
      console.log(data);
    });

    //Creating scales for x and y axis
    var xSxale = d3.scaleBand()
                   .domain(data.map(function(d) {return d.Food;}))
                   .range([0,w-margin]);

    var maxYummy = d3.max(data,function(d) {return +d.Yummy;});

    var yScale = d3.scaleLinear()
                   .domain([0,maxYummy])
                   .range([h-margin,0]);
    </script>
    </body>
</html>

对于 x 轴，我收到以下错误：“data.map 不是函数”。我找不到任何其他方法将不同的食品标签放到 x 轴上。

对于 y 轴，我收到以下错误：“未捕获的类型错误：值不可迭代在 Object.max$3 [as max] (d3.js:641) at (index):39" 似乎与 d3.max() 函数有关。

我不清楚为什么这两个错误都存在，因为我已经看到它们被接受为其他问题的解决方案。这位初学者开发人员将非常感谢任何帮助。非常感谢。