Javascript 如何在d3.js中将网格线移动到条形图后面?
所以我们试图创建一个简单的条形图。正在玩轴游戏,想在条形图后面画网格线。绘制了条形图和网格线,但网格线位于条形图上方 JS:Javascript 如何在d3.js中将网格线移动到条形图后面?,javascript,d3.js,Javascript,D3.js,所以我们试图创建一个简单的条形图。正在玩轴游戏,想在条形图后面画网格线。绘制了条形图和网格线,但网格线位于条形图上方 JS: var dataArray = [6,7,7.2,7.7,7.7,9.5,11.7,10.5,10.1]; var margin = {top: 80, right: 40, bottom: 0, left: 5}; var y = d3.scaleLinear() .domain([0,12]) .range([300,0])
var dataArray = [6,7,7.2,7.7,7.7,9.5,11.7,10.5,10.1];
var margin = {top: 80, right: 40, bottom: 0, left: 5};
var y = d3.scaleLinear()
.domain([0,12])
.range([300,0]);
var ticks = [0,2,4,6,8,10,12];
var gridlines = d3.axisLeft(y)
.tickValues(ticks)
.tickSize(-innerWidth);
var yAxis = d3.axisLeft(y)
.tickValues(ticks)
.tickSize(0);
var svg = d3.select("#barGraph1")
.append("svg")
.attr("height","100%")
.attr("width","100%");
var barGroup = svg.append("g")
.attr("transform","translate("+margin.top+","+margin.left+")");
barGroup.selectAll("rect")
.data(dataArray)
.enter().append("rect")
.attr("height",function(d){return 300-y(d);})
.attr("width","35")
.attr("fill","red")
.attr("transform", "translate(30,0)")
.attr("x",function(d,i){ return 70*i;})
.attr("y",function(d){ return y(d);});
//gridlines
barGroup.append("g")
.attr("class", "grid")
.call(gridlines);
barGroup.append("g")
.attr("class","axisY")
.call(yAxis);
在添加条之前添加网格线,它们将在背景中显示出来