Question

我是javascript和d3的新手。我正在使用https://data.lacity.org/A-Prosperous-City/Los-Angeles-International-Airport-Passenger-Traffi/g3qu-7q2u中的数据来创建折线图可视化。根据在线教程，我已经设置了y轴并计算了该行的数据点。因为此数据集中有很多日期，所以我试图通过解析时间在x轴上显示年份。但是在y轴上没有显示任何内容。我认为问题来自var x = d3.scaleTime().rangeRound([0, width]);或x.domain(d3.extent(DomesticCount, function(d) {return d.name;}));，但我不知道这些是如何运作的。

ReportPeriod的日期格式是01/01/2006 12:00:00 AM。（日/月/年）

以下是csv文件前几行的屏幕截图：任何帮助将不胜感激。

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 80
};

var svg = d3.select('body').append('svg')
    .attr('width', window.innerWidth)
    .attr('height', window.innerHeight);

var width = window.innerWidth - margin.left - margin.right;
var height = window.innerHeight - margin.top - margin.bottom;


var parseTime = d3.timeParse("%d/%m/%Y %H:%M:%S %p");

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);


var g = svg.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var line = d3.line()
    .x(function(d) { return x(d.name); })
    .y(function(d) { return y(d.count); });

// read in our CSV file
d3.csv('Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal.csv', function(data) {

    var DomesticCountMap = {};
    var InternationalCountMap = {};

    data.forEach(function(datum) {
	datum.ReportPeriod = parseTime(datum.ReportPeriod);
		
        if (DomesticCountMap[datum.ReportPeriod] === undefined) {
            DomesticCountMap[datum.ReportPeriod] = 0;
        }

        if (datum.Domestic_International === "Domestic"){DomesticCountMap[datum.ReportPeriod] += parseInt(datum.Passenger_Count);}
        
        if (InternationalCountMap[datum.ReportPeriod] === undefined) {
            InternationalCountMap[datum.ReportPeriod] = 0;
        }
        // aggregate into our map, using the terminal name as the map key
        if (datum.Domestic_International === "International"){InternationalCountMap[datum.ReportPeriod] += parseInt(datum.Passenger_Count);}
    });


    var DomesticCount = [];
    Object.keys(DomesticCountMap).forEach(function(mapKey) {
        DomesticCount.push({
            name: mapKey,
            count: DomesticCountMap[mapKey]
        });
    });
    
    x.domain(d3.extent(DomesticCount, function(d) {return d.name;}));
    y.domain([0, d3.max(DomesticCount, function(d) {return d.count;})]);

    g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(x));

    g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y))
        .append('text')
        .attr("fill", "#000")
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '0.71em')
        .attr('text-anchor', 'end')
        .text('Passenger_Count');

    g.append('path')
	.datum(DomesticCount)
	.attr('fill', 'none')
	.attr('stroke', 'blue')
	.attr('stroke-linejoin', 'round')
	.attr('stroke-linecap', 'round')
	.attr('stroke-width', 1.5)
	.attr('d', line);

});

Answer 1

正如您所假设的，问题不在于您的xScale功能。相反，问题出在这个片段：

  DomesticCount.push({
        name: mapKey,
        count: DomesticCountMap[mapKey]
    });

当您使用d3.scaleTime时，它接受日期对象而不是您域的日期字符串。

在上面的代码中，mapKey是对象key的{{1}}，此键是字符串。正如我所提到的，DomesticCountMap采用日期对象而不是字符串。因此，您的此行d3.scaleTime会将名称值设为name: mapKey字符串。

将date更改为name: mapKey,以将其转换为日期格式，并且一切都将按预期工作。

这是你的工作片段。

d3.js x轴上的缩放时间不起作用

1 个答案: