x轴水平线和y轴标签未显示在D3分组的条形图中

Question

我正在使用react中的D3 V5创建分组条形图。我能够显示y轴，但不显示刻度和文本。但是在x轴的情况下，它是完全不可见的。我已经将d3.min.js添加到index.html文件，但是没有任何效果。任何帮助表示赞赏

我在这里附上我的代码

   DrawChart = (data) => {
     var w = 450, h = 300, p = 100;
     var x0 = d3.scaleBand().range([0, w]).padding(0.4);
     var x1 = d3.scaleBand();
     var y = d3.scaleLinear().range([h, 0]);
     var color = d3.scaleOrdinal().range(["#a85db3", "#95f578"]);
    const svg = d3.select("div#predicative")
      .append("svg").attr("width", w).attr("height", h)
      .attr("padding", p).style("margin-left", 30)
      .style("margin-top", 20).style("margin-bottom", 10);

    var ageNames = d3.keys(data[0]).filter(function (key) { return key !== "dept"; });
    data.forEach(function (d) {
      d.ages = ageNames.map(function (name) { return { name: name, value: +d[name] }; });
    });

    x0.domain(data.map(function (d) { return d.dept; }));
    x1.domain(ageNames).rangeRound([0, x0.bandwidth()]);
    y.domain([0, (d3.max(data, function (d) { return d3.max(d.ages, function (d) { return d.value; }); })) + 10]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(d3.axisBottom(x0)

        .tickSize(-w, 0, 0)
        .tickFormat(''));

    svg.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Time");