x 軸水平線和 y 軸標簽未顯示在 D3 分組條形圖中

Question

我在反應中使用 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");

Answer 1

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