Question

在使用D3进行缩放时，我需要一些帮助。在我的Codepen中，我试图用一些可检索的GDP数据创建图形。

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

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

这里是项目Codepen的链接： 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。

D3条形图无法正确调整大小

1 个答案: