ゼロで軸ラベルを始める方法は？

Question

d3.jsを使用してラベル付きのx軸を描画しようとしていますが、1950年から2015年までのデータ配列があります。年に0から始まるx軸にプロットする予定ですが、 -axis配列の最小値から始まり、最小値として0を持つ配列を編集すると、x軸のラベルが変化します.iamが間違っている箇所は何ですか？

何私のコードの出力：0年は私が欲しいものではありませんどの含まれている1950 ... 1955 .... 1960

出力： 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); 

     } 
    ); 

Answer 1

、あなたが探しているのはです配列の中に0の値を含めて、スケールがLinearの代わりにのスケールを使用してください。

domainとして直接yearsアレイを使用することができ、ポイントの縮尺はデフォルトで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>