javascript - d3 中的多线图，包含几年的每月天气数据，基于时间的 x 轴问题

Question

我的数据格式如下：

DATE,TAVG 1939-09,80.0 1939-10,60.0

依此类推，直到 2018-12。我已经使用了 d3 的 .nest() 函数来将它分开几年。这样做可以让我为每年绘制一条线。

但是，我被秤绊倒了。代码示例x.domain(d3.extent(data, function(d) {return (d.date.getMonth());}));似乎返回了一个数组 ["Dec", "Dec"]，将我所有的 x 轴刻度都保留为 "Dec"。

那么，我在这里到底做错了什么？如何让我的 x 轴刻度为“Jan”、“Feb”等？

正在生成的错误的图像：

D3 x 轴误差

我的代码和我正在使用的天气数据可以在这个 github repo上找到。

我将在此处重现 javascript 代码本身：

// Define margins
var margins = {
    top: 30, right: 20, bottom: 30, left: 50
}, width = 600 - margins.left - margins.right,
   height = 270 - margins.top - margins.bottom;

var parseTime = d3.timeParse("%Y-%m");

// Scales for axes
var x = d3.scaleTime()
            .range([0, width])//.tickFormat(d3.timeFormat("%B"))
            
var y = d3.scaleLinear().range([height, 0]);

// Line function
var weather_line = d3.line()
                        .x(function(d) { return x(d.date.getMonth());})
                        .y(function(d) { return y(d.tavg);});

var color = d3.scaleLinear()
                .domain([1939, 2018]).range(["orange", "red"]);

// Svg object
var svg = d3.select("body").append("svg")
            .attr("width", width + margins.left + margins.right)
            .attr("height", height + margins.top + margins.bottom)
            .append("g")
            .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
            
            
// Get data
// debuging variable
var debug;
var debug2;
var parseMonth = d3.timeFormat("%b");
d3.csv("weather_data.csv",
    function(d) {
        return {
            date : parseTime(d.DATE),
            tavg : +d.TAVG
        };
    }).then(function(data){
        
        x.domain(d3.extent(data, function(d) {return (d.date.getMonth());}));
        
        y.domain([0, d3.max(data, function(d) { return d.tavg; })]);
        
        var years = d3.nest()
                      .key(function(d) { return d.date.getFullYear(); })
                      .entries(data);
        
        
        
        years.forEach(function(d, i) {
            svg.append("path")
                .attr("class", "line")
                .attr("d", weather_line(d.values))
                .style("stroke", function() {return color(parseInt(d.key));});
        });
        
        // Add our axes
        svg.append("g")
            .attr("transform", "translate(0,"+height+")")
            .call(d3.axisBottom(x).ticks(12).tickFormat(d3.timeFormat("%b")));
            
        svg.append("g")
            .call(d3.axisLeft(y).ticks(4));
        
    });

标签： javascriptd3.jslinechart