title: d3 center tick and x-axis label when single value
body: <p>I have the following d3 code:</p>
  
  <pre><code>                var json = [
                  {
                      date: "05/17",
                      numTags: 23
                  }
              ];
  
              d3.select('summary-graph').selectAll('*').remove();
  
              var svg = d3.select("summary-graph"),
                  margin = {
                      top: 20,
                      right: 30,
                      bottom: 30,
                      left: 40
                  },
                  width = svg.attr("width") - margin.left - margin.right,
                  height = svg.attr("height") - margin.top - margin.bottom;
  
              var parseTime = d3.timeParse("%m/%y");
  
              var svg = d3.select("summary-graph").append("svg")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                  .attr("transform",
                      "translate(" + margin.left + "," + margin.top + ")");
  
              // Get the data
              var data = json;
  
              // format the data
              data.forEach(function (d) {
                  console.log(d);
                  d.date = parseTime(d.date);
                  d.numTags = +d.numTags;
              });
  
              // set the ranges
              var xScale = d3.scaleTime()
                              .range([0, width])
                              .domain(d3.extent(data, function (d) {
                                  return d.date;
                              }))
                              .nice();
  
              var yScale = d3.scaleLinear()
                              .range([height, 0])
                              .domain([0, d3.max(data, function (d) {
                                  return Math.max(d.numTags);
                              })])
                              .nice();
  
              // define the 1st line
              var tagLine = d3.line()
                  .x(function (d) {
                      return xScale(d.date);
                  })
                  .y(function (d) {
                      return yScale(d.numTags);
                  });
  
  
              // Axes
              var xAxis = d3.axisBottom()
                            .scale(xScale)
                            .ticks(json.length)
                            .tickSizeOuter(0)
                            .tickFormat(d3.timeFormat('%B %Y'));
  
              var yAxis = d3.axisLeft().scale(yScale);
  
              svg.append("path")
                  .data([data])
                  .attr("class", "line")
                  .style("stroke", "blue")
                  .attr("d", tagLine);
  
              var points = svg.selectAll(".point")
                      .data(data)
                      .enter().append("svg:circle")
                       .attr("stroke", "green")
                       .attr("fill", function(d, i) { return "blue" })
                       .attr("cx", function(d, i) { return xScale(d.date) })
                       .attr("cy", function(d, i) { return yScale(d.numTags) })
                       .attr("r", function(d, i) { return 10 });
  
              // Add the X Axis
              svg.append("g")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis)
                  .style("font-size","14px");;
  
              // Add the Y Axis
              svg.append("g")
                  .call(yAxis);
  </code></pre>
  
  <p>Which produces the following visualization:</p>
  
  <p><a href="https://i.stack.imgur.com/1Q67E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Q67E.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to figure out how to center the tick mark and show the x-axis label when there is only 1 data point like this. At 2 data points, I don't love how it still sets the tick marks at the extreme ends of the x-axis. For 3 data points and above, it looks nice (thanks to .nice() it seems).</p>
  
  <p>Any help?</p>
  
  <hr>
  
  <p>Based on Gerado's response, I was able to get close. The last sticking point is that the left side of the X-axis now has the month (March) despite no data for that day.</p>
  
  <p><a href="https://i.stack.imgur.com/W5pBf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W5pBf.png" alt="enter image description here"></a></p>
  
  <p>Fixed:
  changed .ticks(json.length) to .ticks(d3.timeMonth.every(1))</p>