爲什麼我的X（時間）軸上沒有刻度？

Question

問題：

爲什麼有我的X（時間）軸xAxis沒有蜱蟲？

---

CODE：

<script type="text/javascript"> 
     d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(error, json) { 
      if (error) { 
       return console.warn(error); 
      } 
      visualizeIt(json); 
     }); 

     function visualizeIt(data) { 
      const dataset = data.data; 

      const margin = { 
       top: 10, 
       right: 6, 
       bottom: 20, 
       left: 70 
      } 

      const w = 900 - margin.left - margin.right; 
      const h = 500 - margin.top - margin.bottom; 
      const barWidth = Math.ceil(w/dataset.length); 
      const format = d3.timeFormat("%Y-%m"); 

      const mindate = dataset[0][0]; 
      const maxdate = dataset[274][0]; 

      const xScale = d3.scaleTime() 
       .domain([mindate, maxdate])  
       .range([0, w]); 

      const yScale = d3.scaleLinear() 
       .domain([0, d3.max(dataset, (d) => d[1])]) 
       .range([h, 0]); 

      const xAxis = d3.axisBottom(xScale); 

      const yAxis = d3.axisLeft(yScale) 

      const svg = d3.select("#results") 
       .append("svg") 
       .attr("width", w + margin.left + margin.right) 
       .attr("height", h + margin.top + margin.bottom); 


      svg.append("g") 
       .attr("transform", "translate(50," + (h+margin.top) + ")") 
       .call(xAxis); 

      svg.append("g") 
       .attr("transform", "translate(50," + margin.top + ")") 
       .call(yAxis); 

      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", (d,i) => 50+barWidth*i) 
       .attr("y", (d, i) => yScale(d[1]) + margin.top) 
       .attr("width", barWidth) 
       .attr("height", (d, i) => h - yScale(d[1])) 
       .attr("fill", "navy") 
       .attr("class", "bar"); 

     } 

    </script> 

Answer 1

有在你的代碼的一些問題，但我會只處理那些與x軸刻度：

1. 你想到解析字符串和返回日期，而不是相反。在const format是錯誤的說明符：因此，而是採用timeFormat，您conts format應該使用timeParse：

   const format = d3.timeParse(specifier) 
   

2. 這給我們帶來了第二個問題。您在這裏缺少%d，這是一天，因爲您的字符串是這樣的："1947-01-01"。所以，它應該是：

   const format = d3.timeParse("%Y-%m-%d") 
   

3. 你必須使用的解析器日期：

   const mindate = format(dataset[0][0]); 
   

   執行相同的maxdate。

這是你更新CodePen：https://codepen.io/anon/pen/GmjRzY?editors=1010