D3 Grid

Draw grid axis

Use tickSize() to control the height of tick in axis. And the positive or negative of the height controls the direction of the tick.

          .tick line{
			opacity: 0.2;

              	var margin = {top: 20, right: 20, bottom: 50, left: 70};
    	var width = 500 - margin.left - margin.right;
		var height = 200 - - margin.bottom;
		var svg ="#diagram").append("svg")
					.attr("width", width+margin.left+margin.right)

		//set y scale
		var yScale = d3.scaleLinear().range([0,height]).domain([height,0]);
		//add x axis
		var xScale = d3.scaleLinear().range([0,width]).domain([0,width]);//scaleBand is used for  bar chart
		svg.append("text").text("Gray line is inner tick")
			.style("text-anchor", "middle")
		svg.append("text").text("Black outline is outter tick")
			.style("text-anchor", "middle")