Многострочные графики в d3 с ежемесячными данными о погоде за несколько лет, временные задачи по оси X - PullRequest
Новая
       8

Многострочные графики в d3 с ежемесячными данными о погоде за несколько лет, временные задачи по оси X

0 голосов
/ 10 февраля 2019

У меня есть данные, отформатированные так:

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

И так далее, до 2018-12.Я использовал функцию dn .nest (), чтобы разделить ее по годам.Это позволяет мне строить линии для каждого года.

Однако меня сбивают с толку весы.Пример кода x.domain(d3.extent(data, function(d) {return (d.date.getMonth());}));, кажется, возвращает массив ["Dec", "Dec"], оставляя все мои пометки по оси X как "Dec".

Итак, что именно я делаю здесь неправильно?Как я могу сделать так, чтобы мои отметки по оси X были "Jan", "Feb" и т. Д .?

Изображение получаемой ошибки:

Ошибка оси X D3

Мой код и данные о погоде, которые я использую, доступны на этом репозитории github .

Сам код 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));
        
    });
...