x-axis horizontal line and y-axis labels are not displaying in D3 Grouped bar chart

Question

I am creating grouped bar chart using D3 V5 in react.I am able to display y axis but not ticks and text.but in case of x-axis it's completely invisible. i have added d3.min.js to index.html file, but nothing works. any help is appreciated

here I am attaching my code

   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");

Answer 1

svg:not(:root){
  overflow: visible;
}