как начать метку оси с нуля?

Я пытаюсь рисовать ось x с метками с использованием d3.js, у меня есть массив данных лет с 1950 по 2015 год, я намерен строить их по оси x, начиная с года 0, но мой код выводит ось x который начинается с минимального значения массива, если отредактируйте массив с 0 как минимальное значение, тогда метки меток x меняются. Любой намек на то, где я делаю неправильно?

что мой код выводит: 1950... 1955.... 1960

выход, когда включен год 0, что не то, что я хочу: 0.... 200.... 400.......... 2015

что я намерен вывести: 0.... 1950.... 1955....

ссылка на codepen

   $.getJSON(
      "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json",
      function(x) {
        var rawData = x.data;
        var yearData = [];
        var gdpData = [];
        var width = 1020;
        var height = 100;
        for (var i = 0; i < rawData.length; i++) {
          yearData.push(rawData[0][0]);
          gdpData.push(rawData[1][1]);
        }

        //values which should be labeled on x-axis
        var years = [
          1950,
          1955,
          1960,
          1965,
          1970,
          1980,
          1985,
          1990,
          2000,
          2005,
          2010,
          2015
        ];
        var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append('g');


        var x_domain = d3.extent(years, function(d) {
          return d;
        });

        var xscale = d3
        .scaleLinear()
        .domain(x_domain)
        .nice()
        .range([20, 600]);

        var x_axis = d3
        .axisBottom()
        .scale(xscale)
        .ticks(11);

        svg
          .append("g")
          .call(x_axis);

      }
    );