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

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是对象DomesticCountMap的一个key，这个key是一个字符串。 正如我提到的，d3.scaleTime 采用日期对象而不是字符串。因此，您的这一行 name: mapKey 使 name 值成为 date 字符串。

将 name: mapKey, 更改为 name: new Date(mapKey) 以将其转换为日期格式，一切都会按您的预期进行。

这是您的工作片段。 https://jsfiddle.net/g6kf99x7/1/