有没有办法使D3条形图上的网格线出现在条形图的后面？使用d3 + react

问题描述

我在React项目中使用d3。通读SO帖子，推荐的主要解决方案是确保在条形图之前添加网格线，因为d3没有z-index attr。我已经做到了，但仍然无法正常工作-网格线位于条形图的前面。外观如下：

这是代码：

const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    if (Object.keys(data).length === 0) return;

    const numPlacement = n => {
      if (n > 100) return 2.4;
      if (n > 10) return 2.3;
      return 2.16;
    };

    let width = 800;
    let height = 500; 
    const svg = d3
      .select(svgRef.current)
      .attr("height",height)
      .attr("width",width);

    //scales
    let x = d3
      .scaleBand()
      .domain(data.map(d => d.stage))
      .range([0,width]);

    let y = d3
      .scaleLinear()
      .domain([0,Math.ceil(data[0].number / 10) * 10]) 
      .range([height,0]);

    //axes
    let xAxisCall = d3.axisBottom(x);
    svg
      .select(".x-axis")
      .style("transform",`translateY(${height}px)`)
      .call(xAxisCall)
      .selectAll("text")
      .attr("y","20")
      .attr("font-size","15");

    let yAxisCall = d3.axisLeft(y);
    svg.select(".y-axis").call(yAxisCall);

    //labels
    //x label bottom
    svg
      .append("text")
      .attr("class","d3-label")
      .attr("y",height + 70)
      .attr("x",width / 2)
      .attr("font-size","25px")
      .attr("text-anchor","middle")
      .text("Stages");

    //top x label
    svg
      .append("text")
      .attr("class",-15)
      .attr("x","30px")
      .attr("text-anchor","middle")
      .text("Job Hunt Progress");

    //y label
    svg
      .append("text")
      .attr("class",-60)
      .attr("x",-(height / 2))
      .attr("font-size","middle")
      .attr("transform","rotate(-90)")
      .text("Number of Companies");

    //y lines
    const makeYLines = () => d3.axisLeft().scale(y);
    svg
      .append("g")
      .attr("class","grid")
      // .attr("id","links")
      .call(
        makeYLines()
          .tickSize(-width,0)
          .tickFormat("")
      );

    //bars
    svg
      .selectAll(".bar")
      .data(data)

      .join("rect")
      .attr("class","bar")
      .style("transform","scale(1,-1)")
      .attr("x",d => x(d.stage) + x.bandwidth() / 4)

      .attr("y",-height)
      .attr("width",x.bandwidth() / 2)
      .transition()
      .attr("height",d => height - y(d.number))
      .attr("fill","#80cbc4 !important");

    svg
      .selectAll(".tooltip")
      .data(data)
      .join("text")
      .attr("class","tooltip")
      .text(v => (v.number > 0 ? v.number : null))
      .attr("fill","#fff")
      .attr("x",v => x(v.stage) + x.bandwidth() / numPlacement(v.number))
      .attr("y",v => y(v.number) + (v.number > 4 ? 20 : 17))
      .transition()
      .attr("opacity",1);
  },[data]);

  return (
    <HeaderContainer>
      <ChartArea>
        <SVG ref={svgRef}>
          <g className="x-axis" />
          <g className="y-axis" />
        </SVG>
      </ChartArea>
    </HeaderContainer>
  );
};

很抱歉，如果我添加的内容过多，我是d3的新手，并且真的不知道问题可能在哪里。如果我需要提供其他信息，请lmk。希望能解决这个问题！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）