Javascript D3条形图未正确调整大小

我需要一些关于D3缩放的帮助。在我的代码笔中，我试图创建一个带有一些检索GDP数据的图表

数据被正确检索和显示，但当我尝试缩放图形时，仅显示一个垂直条

有人能给我指出正确的方向吗

以下是指向project codepen的链接：

main.js：

    $(document).ready(function() {
    $.getJSON(
        'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json',
            function(data) {
            const dataset = data.data;

            const w = 1000;
            const h = 500;

            var maxX = d3.max(dataset, d => d[1]);
            var minDate = new Date(dataset[0][0]);
            var maxDate = new Date(dataset[dataset.length - 1][0]);

            var xScale = d3
                .scaleTime()
                .domain([minDate, maxDate])
                .range([0, w]);

            var yScale = d3
                .scaleLinear()
                .domain([0, maxX])
                .range([h, 0]);

            var xAxis = d3.axisBottom().scale(xScale);

            var yAxis = d3.axisLeft().scale(yScale);

            const svg = d3
                .select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h);

            svg
                .selectAll('rect')
                .data(dataset)
                .enter()
                .append('rect')
                .attr('x', (d, i) => xScale(i * 10))
                .attr('y', d => h - yScale(d[1]))
                .attr('width', 2)
                .attr('height', d => yScale(d[1]))
                .attr('fill', 'navy');
        }
    );
});

---

您正在使用x轴的时间刻度。但您并不是基于时间来定位条形图：

.attr('x', (d, i) => xScale(i * 10))

您将根据其索引定位每个栏。电子秤希望你给它输入一个日期（它取提供的数字并将其作为日期处理，这非常接近新纪元的开始（1970年1月1日），这解释了定位。这些条显示为一条，因为每一条都比前一条长10毫秒，其刻度可以覆盖几十年，这是一个难以察觉的差异）

相反，让我们将x刻度输入数据中的日期：

.attr('x', d => xScale(new Date(d[0]) )

因为数据包含日期的字符串表示，所以我在这里转换为日期对象。您可以在加载数据后对其执行此操作，但为了最小化更改，我只在指定x属性时执行此操作

---

这是最新的。

谢谢安德鲁，你的推荐很有效。另外，谢谢你的解释。