javascript - D3 条形图未正确调整大小

Question

我需要一些有关使用 D3 进行缩放的帮助。在我的代码笔中，我正在尝试创建一个包含一些检索 GDP 数据的图表。

数据已正确检索和显示，但当我尝试缩放图表时，只显示一个垂直条。

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

这是项目代码笔的链接: https://codepen.io/henrycuffy/pen/gKVdgv

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');
        }
    );
});

Answer 1

您正在为 x 轴使用时间刻度。但是您并没有根据时间定位条形图:

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

您正在根据其索引定位每个条。秤希望您向它提供一个日期(它采用提供的数字并将其视为一个日期，该日期非常接近纪元的开始(1970 年 1 月 1 日)，这解释了定位。条形显示为一个因为在覆盖数十年的尺度上，每一个都与前一个相差 10 毫秒，这是一种难以察觉的差异)。

相反，让我们将数据中的日期提供给 x 刻度:

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

由于数据包含日期的字符串表示形式，因此我在这里转换为日期对象。您可以在数据加载后对其执行此操作，但为了尽量减少更改，我只是在分配 x 属性时这样做。

这是更新的 plunkr .