d3.js - How to fix grid `z-index` issue? - d3.js

Question

In my chart, I am trying to fix the grid behind the bars, But some how I coun't able to fix this. any one help me?
window.onload = function(){
var margin = { left:60, top:30, right:60, bottom:30 },
width = 550 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
totalWidth = width + margin.left + margin.right,
totalHeight = height + margin.top + margin.bottom;
var data = [
{"year":2012, "amount" : 1000, "value": 0 },
{"year":2013, "amount" : 2000, "value": 50 },
{"year":2014, "amount" : 3000, "value": 1.5 },
{"year":2015, "amount" : 4000, "value": 2 },
{"year":2016, "amount" : 9000, "value": 2.5 }
];
var y = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.amount; })]);
var y1 = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.value; })]);
var y2 = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.amount; })]);
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
x.domain(data.map(function(d) { return d.year; }));
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y1).tickFormat(function(d){
return '$'+ (+d) + 'B';
}).orient("left");
var y1Axis = d3.svg.axis().scale(y2).orient("right");
var svg = d3.select('#container').append('svg').attr({width:totalWidth,height:totalHeight});
var graphMargin = "translate(" + margin.left + ',' + margin.top + ')';
var playBoard = svg.append('g').attr("transform", graphMargin);
var gridBoard = svg.append('g').attr("transform", graphMargin);
var xParHolder = playBoard.selectAll('g').data( data ).enter().append('g')
.attr("class", "x axis")
.attr('transform', function(d,i){
return 'translate(' + (x(d.year)) + ',' + '0)';
});
xParHolder.append('rect').attr('class', 'rect')
.attr("y", function(d) { return y(d.amount); })
.attr("height", function(d) { return height - y(d.amount); })
.attr("width", x.rangeBand());
playBoard.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height+1) + ")")
.call(xAxis);
playBoard.append("g")
.attr("class", "y axis")
.call(yAxis);
playBoard.append("g")
.attr("transform", "translate(" + width +',' + 0 + ")")
.attr("class", "y axis")
.call(y1Axis);
gridBoard.append("g").attr("class", "y axis").call(yAxis)
.selectAll("g.tick").each(function(d,i){
if(i>0){
d3.select(this).select('line').attr('x2',width);
}
});
}
#container {
border: 2px solid red;
text-align: center;
padding: 2em;
}
svg{
border:1px solid gray;
}
.rect {
fill: steelblue;
}
.title {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis path,
.axis line{
fill: none;
stroke: black;
}
.line{
fill: none;
stroke: blue;
stroke-width: 2px;
}
.tick text{
font-size: 12px;
}
.tick line{
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container"></div>

Answer 1

In an SVG, what comes later is painted later, and therefore will be on top.
That being said, all you need to do is changing this:
var playBoard = svg.append('g').attr("transform", graphMargin);//this will be under
var gridBoard = svg.append('g').attr("transform", graphMargin);//this will be on top
for this:
var gridBoard = svg.append('g').attr("transform", graphMargin);//now gridBoard is under...
var playBoard = svg.append('g').attr("transform", graphMargin);//...and playBoard is on top
Here is your fiddle: https://jsfiddle.net/kck052o1/