Personalizing the d3 x axis labels

Question

I'm working on making a line graph, and after some googling I have come up with this:

function maxValue(input) {
          var current = 0;

          for (var i = 0; i < input.length; i++) {
              if (input[i] > current) {
                current = input[i];
              }
          }

          return current;
        }

        var m = [80, 80, 80, 80]; // margins
        var w = 900 - m[1] - m[3]; // width
        var h = 600 - m[0] - m[2]; // height

        var data = [1, 6, 5, 12, 30, 45, 50, 48, 60, 69, 62, 80];

        var months = ["January", "February", "March", "April", "May",
                     "June", "July", "August", "September", "October", 
                     "November", "December"];

        var x = d3.scale.linear().domain([1, 12]).range([0, w]);
        var y = d3.scale.linear().domain([0, maxValue(data)]).range([h, 0]);

        var line = d3.svg.line()
            .x(function(d,i) { 
                return x(i + 1); 
            })
            .y(function(d) {
                return y(d); 
            })

            var graph = d3.select("#graph").append("svg:svg")
                  .attr("width", w + m[1] + m[3])
                  .attr("height", h + m[0] + m[2])
                .append("svg:g")
                  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
            graph.append("svg:g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + h + ")")
                  .call(xAxis);


            var yAxisLeft = d3.svg.axis().scale(y).ticks(3).orient("left");
            graph.append("svg:g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(-25,0)")
                  .call(yAxisLeft);

            graph.append("svg:path").attr("d", line(data));

            graph.append("text")
              .attr("x", w/2)
              .attr("y", -20)
              .style("text-anchor", "middle")
              .style("font-size", "18")
              .text("Total Hits in the Last Year");

As you can see, I made an array for the months of the year, and would like the x-axis to display months instead of a numeric value. But I can't tell where it says what to make the labels. Any know how to help? Thanks!

P.S. what does doing "svg:svg" do differently than just "svg?"

Edit:

function maxValue(input) {
          var current = 0;
          
          for (var i = 0; i < input.length; i++) {
              if (input[i] > current) {
                current = input[i];
              }
          }
          
          return current;
        }
      
		var m = [80, 80, 80, 80]; // margins
		var w = 900 - m[1] - m[3]; // width
		var h = 600 - m[0] - m[2]; // height
      
		var data = [1, 6, 5, 12, 30, 45, 50, 48, 60, 69, 62, 80];

        var months = ["January", "February", "March", "April", "May",
                     "June", "July", "August", "September", "October", 
                     "November", "December"];
      
		var x = d3.scale.linear().domain([1, 12]).range([0, w]);
		var y = d3.scale.linear().domain([0, maxValue(data)]).range([h, 0]);

		var line = d3.svg.line()
			.x(function(d,i) { 
				return x(i + 1); 
			})
			.y(function(d) {
				return y(d); 
			})

			var graph = d3.select("#graph").append("svg:svg")
			      .attr("width", w + m[1] + m[3])
			      .attr("height", h + m[0] + m[2])
			    .append("svg:g")
			      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

			var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
			graph.append("svg:g")
			      .attr("class", "x axis")
			      .attr("transform", "translate(0," + h + ")")
			      .call(xAxis);


			var yAxisLeft = d3.svg.axis().scale(y).ticks(3).orient("left");
			graph.append("svg:g")
			      .attr("class", "y axis")
			      .attr("transform", "translate(-25,0)")
			      .call(yAxisLeft);
			
  			graph.append("svg:path").attr("d", line(data));
			
            graph.append("text")
              .attr("x", w/2)
              .attr("y", -20)
              .style("text-anchor", "middle")
              .style("font-size", "18")
              .text("Total Hits in the Last Year");

path {
				stroke: steelblue;
				stroke-width: 1;
				fill: none;
			}
			
			.axis {
			  shape-rendering: crispEdges;
			}

			.x.axis line {
			  stroke: lightgrey;
			}

			.x.axis .minor {
			  stroke-opacity: .5;
			}

			.x.axis path {
			  display: none;
			}

			.y.axis line, .y.axis path {
			  fill: none;
			  stroke: #000;
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<html>
	<head>
		<title>Simple Line Graph</title>
	</head>
	<body>

	<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

	</body>
</html>

Answer 1

You could use the tickFormat function for the xAxis to fetch the month name from the array:

var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true).tickFormat(function(d) {
        return months[d-1]; 
    });