CODEXE

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.top - margin.bottom;
		
		var svg = d3.select("#diagram").append("svg")
					.attr("width", width+margin.left+margin.right)
					.attr("height", height+margin.top+margin.bottom)
					.append("g")
					.attr("transform","translate("+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("g").call(d3.axisBottom(xScale).ticks(10).tickSize(-height))
			.attr("transform","translate(0,"+height+")");
		svg.append("g").call(d3.axisLeft(yScale).tickSize(-width));
		
		svg.append("text").text("Gray line is inner tick")
			.attr("x",0-height/2)
			.attr("y",0-margin.left)
			.attr("dy","1em")
			.style("text-anchor", "middle")
			.attr("transform","rotate(-90)");
		svg.append("text").text("Black outline is outter tick")
			.attr("x",width/2)
			.attr("y",height+margin.bottom)
			.style("text-anchor", "middle")