javascript - 为什么我的 X(时间)轴上没有刻度？

Question

问题:

为什么我的 X(时间)轴 xAxis 上没有刻度？

<小时/>

代码:

 <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. 您想要解析字符串并返回日期，而不是相反。因此，您的 conts format 应使用 timeParse，而不是使用 timeFormat:

   const format = d3.timeParse(specifier) 
   

2. 这给我们带来了第二个问题:const 格式 中的说明符是错误的。您在这里缺少 %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