Javascript 为什么我的X（时间）轴上没有刻度？

问题：

 <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>

为什么我的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>

d3.json（“https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json，函数（错误，json）{
如果（错误）{
返回控制台。警告（错误）；
}
可视化it（json）；
});
函数可视化IT（数据）{
常量数据集=data.data；
常量边距={
前10名，
右:6,，
底数：20，
左：70
}
常数w=900-边距.左-边距.右；
常数h=500-margin.top-margin.bottom；
const barWidth=Math.ceil（w/dataset.length）；
常量格式=d3.timeFormat（“%Y-%m”）；
const mindate=数据集[0][0]；
const maxdate=数据集[274][0]；
常量xScale=d3.scaleTime（）
.domain（[mindate，maxdate]）
.范围（[0，w]）；
常量yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据集，（d）=>d[1]））
.范围（[h，0]）；
常数xAxis=d3.axisBottom（xScale）；
常数yAxis=d3.轴左（yScale）
const svg=d3.选择（“结果”）
.append（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）；
svg.append（“g”）
.attr（“变换”、“平移（50）”+（h+margin.top）+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“转换”、“翻译（50“+margin.top+”））
.呼叫（yAxis）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>50+条宽*i）
.attr（“y”，（d，i）=>yScale（d[1]）+margin.top）
.attr（“宽度”，barWidth）
.attr（“高度”（d，i）=>h-yScale（d[1]））
.attr（“填充”、“海军”）
.attr（“类别”、“酒吧”）；
}

您的代码中存在一些问题，但我将仅讨论与x轴刻度相关的问题：

您希望解析字符串和返回日期，而不是相反。因此，您的

conts格式应使用
timeParse
，而不是使用
timeFormat
：

const format = d3.timeParse(specifier) 

这就引出了第二个问题：

const格式中的说明符是错误的。您缺少
%d
，这是当天，因为您的字符串如下：
“1947-01-01”
。因此，它应该是：

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

您必须在日期中使用解析器：

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

对

maxdate

执行相同的操作

---

这是您更新的代码笔：

可能与您的代码中没有代码的原因相同question@charlietfl更新的问题与您的问题无关，但274条不是显示此数据的最佳方式。考虑使用一个区域或线图。谢谢你好你知道这个问题的答案吗@代码1000我刚刚回答。