title: D3js: Unable to translate the x-axis ticks a little bit to the right so that they don´t start from 0 in the X axis?
body: <p>I have a code which draw a bar chart. The problem is that the first <code>x-axis</code> tick starts from 0 value in the x-axis, totally stacked to left, without the smallest margin from the y-axis and,therefore, the the first bar is drawn from where the <code>y-axis</code> is drawn, which makes the cart looks terrible.</p>
  
  <p>I've researched but haven't found a way to move or translate <code>x-axis</code> ticks so that the first one has a decent left margin, let's say, 10 px from the <code>y-axis</code>. How can I accomplish this?  I will leave a runnable snippet to provide more info.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
    {year: 2000, population: 1192},
    {year: 2001, population: 1234},
    {year: 2002, population: 1463},
    {year: 2003, population: 1537},
    {year: 2004, population: 1334},
    {year: 2005, population: 1134},
    {year: 2006, population: 1234},
    {year: 2007, population: 1484},
    {year: 2008, population: 1562},
    {year: 2009, population: 1427},
    {year: 2010, population: 1325},
    {year: 2011, population: 1484},
    {year: 2012, population: 1661},
    {year: 2013, population: 1537},
    {year: 2014, population: 1334},
    {year: 2015, population: 1134},
    {year: 2016, population: 1200}
   ];
  
  
    var parseDate = d3.timeParse("%Y");
  
  
    function type(dataArray) {
     dataArray.forEach(function(d) {
      d.year = parseDate(d.year);
      d.retention = +d.population;
     });
     return dataArray;
    }
    data = type(data);
  
  
  
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
  
     height = 500 - margin.top - margin.bottom;
  
  
    var xScale = d3.scaleTime();
    var yScale = d3.scaleLinear().range([height, 0]);
  
  
    var xAxis = d3.axisBottom().scale(xScale)
  
  
    var yAxis = d3.axisLeft().scale(yScale)
  
  
  
  
  
    var svg = d3.select("body")
     .append("svg")
      .attr("height", height + margin.top + margin.bottom);
  
    var artboard = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
    xScale.domain(d3.extent(data, function(d) { return d.year; }));
    yScale.domain([
      d3.min(data, function(d) { return d.population - 200 }), 
      d3.max(data, function(d) { return d.population + 200 })
     ]);
  
  
  
  
    var xAxisEl = artboard.append("g")
      .attr("transform", "translate(0," + height + ")");
  
  
    var yAxisEl = artboard.append("g")
      .call(yAxis);
  
  
    function drawChart() {
  
     width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right;
  
  
     svg.attr("width", width + margin.left + margin.right);
  
     xScale.range([0, width]);
  
  
     xAxis.scale(xScale);
  
  
     xAxisEl.call(xAxis);
  
     var rects = svg.selectAll("rect")
      .attr("class","rects2")
      .data(data);
  
      rects.enter()
      .append("rect")
      .attr("fill","#BC204D").attr("y", function(d) {
       return height - yScale(d.population)
       }).merge(rects)
       .attr("height", 0)
      .transition()
      .duration(1000)
      .attr("height", function(d) {
        return yScale(d.population);
        })
      .attr("width", 10)
      .attr("transform", function (d, i) {
        return "translate(" + (xScale(d.year) + margin.left)   + "," + margin.bottom + ")"
      })
      .attr("fill","#00338D");
      rects.exit().remove();
    }
  
    drawChart();
  
    window.addEventListener('resize', drawChart);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>