title: d3js x axis dates display month at the end not in the front
body: <p>When displaying a axis with months as ticks, the month is attached to the last day of the month.  Would like it to be in the beginning of the month.</p>
  
  <p>Working sample can be see at: <a href="http://codepen.io/pcasa/pen/apYdwG" rel="nofollow noreferrer">http://codepen.io/pcasa/pen/apYdwG</a></p>
  
  <p><a href="https://i.stack.imgur.com/fOGvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fOGvx.png" alt="enter image description here"></a></p>
  
  <pre><code>var svg = d3.select('#chart')
                 .append("svg:svg")
                 .attr("height", 100)
                 .attr("width", 800);
  
  svg.append('g')
     .attr('transform', 'translate(20,20)')
     .attr('class', 'main axis date');
  
  svg.append('g')
                .attr('transform', 'translate(20,20)')
                .attr('class', 'main axis month')
                .selectAll('text')
                  .style("text-anchor", "start")
                  .attr('dx', 5)
                  .attr('dy', 12);
  
  var x = d3.scaleUtc()
              .range([0,760])
              .domain([new Date(2016, 7, 20),new Date(2016, 9, 2)])
              .clamp(true);
  
  var x1DateAxis = d3.axisBottom(x)
                 .ticks(d3.utcDay, 1)
                 .tickFormat(d3.timeFormat('%d'))
                 .tickSize(16, 0, 0);
  
  var x1MonthAxis = d3.axisBottom(x)
                .ticks(d3.utcMonth, 1)
                .tickFormat(d3.timeFormat('%B'))
                .tickSize(24, 0, 0);
  
  svg.select('.axis.month')
            .call(x1MonthAxis)
            .selectAll('text')
              .style('text-anchor', 'end');
  
  svg.select('.axis.date')
            .call(x1DateAxis)
            .selectAll('text')
              .style('text-anchor', 'end')
              .attr('dy', -6)
              .attr('dx', -1);
  </code></pre>