javascript - 如何从零开始标注轴？

我正在尝试使用d3.js用标签绘制x轴，我有一个从1950年到2015年的数据数组，我打算从0年开始在x轴上绘制它们，但是我的代码输出x轴它以数组的最小值开始，如果编辑数组的最小值为0，则x轴标签会更改。是否有提示我在哪里做错了？

我的代码输出：1950 ... 1955 .... 1960

当包括0年时，输出不是我想要的：
 0 .... 200 .... 400 .......... 2015

我打算输出的是：0 .... 1950 .... 1955 ....

link to 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);

      }
    );

最佳答案

根据您的评论，您要查找的是Point刻度，而不是Linear刻度，并将0值包括在数组中。

您可以将years数组直接用作domain，然后点缩放将默认为对tickValues使用这些值。

$.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 = [0, // including the 0
          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 xscale = d3
        .scalePoint() // instead of Linear
        .domain(years) // can use the years array directly as domain
        .range([20,600]);

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

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

      }
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>