如何解决有没有办法使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 举报,一经查实,本站将立刻删除。