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

Question

I am new to javascript and d3. I am using data from https://data.lacity.org/A-Prosperous-City/Los-Angeles-International-Airport-Passenger-Traffi/g3qu-7q2u to create a line chart visualization. Based on tutorials online, I have already set up y axis and calculated the data points for the line. Because there are a lot of dates in this dataset, I tried to just show years on x axis by parsing time. But nothing is shown on y axis. I think the problem came from var x = d3.scaleTime().rangeRound([0, width]); or x.domain(d3.extent(DomesticCount, function(d) {return d.name;})); , but I have no idea how those work.

Date format for ReportPeriod is 01/01/2006 12:00:00 AM. (dd/mm/yyyy)

Here is a screenshot of first few rows of the csv file: Any help will be appreciated.

 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

As you assumed, the problem is not with your xScale function. Instead, the problem lies at this snippet:

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

When you are using d3.scaleTime it accepts the date object not a date string for your domain.

In the above code, mapKey is a key for object DomesticCountMap , this key is a string. As I mentioned d3.scaleTime takes a date object not a string. So, your this line name: mapKey make name value a date string.

Change name: mapKey, to name: new Date(mapKey) to convert it in date formate, and everything will work as you expected.

Here's is your working snippet. https://jsfiddle.net/g6kf99x7/1/