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

Question

Вот мой код:

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 270 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%d-%m-%y").parse; 

// Set the ranges 
var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(5); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left").ticks(5); 

// Define the line 
var valueline = d3.svg.line() 
    .x(function(d) { return x(+d.AtTime); }) 
    .y(function(d) { return y(d.Temperature); }); 

// Adds the svg canvas 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.csv("../datasets/test.csv", function(error, data) { 
    data.forEach(function(d) { 
     d.AtTime = parseDate(d.AtTime); 
     d.Temperature = +d.Temperature; 
    }); 
console.log(data); 
    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.AtTime; })); 
    y.domain([0, d3.max(data, function(d) { return d.Temperature; })]); 

    // Add the valueline path. 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", valueline(data)); 

    // Add the X Axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

}); 

И линия чат просто не могу показать ... Вот мой простой набор данных в формате CSV:

Категория , Температура, давление, AtTime A, 76,400,1-1-2014 B, 23,239,2-3-2013 C, 38,6 378,2-6-2016 D, 43,2,289,3-5-2015 E, 49,501,3-5-2015

Я использовал console.log (данные) для проверьте, и я обнаружил, что AtTime имеет нулевое значение .... Я не знаю, почему ... Кто-нибудь может мне помочь? Благодаря!

Answer 1

Существует ошибка в ваших датах, я проанализирован их и приказал им так линия будет отображаться корректно.

data.forEach(function(d) { 
    var dateArr = d.AtTime.split('-'); 
    d.AtTime = new Date(+dateArr[2], +dateArr[1], +dateArr[0]); 
    d.Temperature = +d.Temperature; 
    }) 
    data.sort(function(a, b) { 
    return new Date(b.AtTime) - new Date(a.AtTime); 
    }); 

Удалить неявное число ввергнуть в функции Valueline:

var valueline = d3.svg.line() 
    .x(function(d) { 
    return x(d.AtTime); 
    }) 
    .y(function(d) { 
    return y(d.Temperature); 
    }); 

И, наконец, если у вас нет каких-либо CSS добавить обводку к вашей линии, так что делает:

svg.append("path") 
    .attr("class", "line") 
    .attr('stroke', 'red') 
    .attr("d", valueline(data)); 

Working plnkr: https://plnkr.co/edit/ujFDtHkdtC2EeBwJ1foU?p=preview

Answer 2

Это один символ в вашей временной форме.

//var parseDate = d3.time.format("%d-%m-%y").parse; // lower-case Y expects two digits only 
var parseDate = d3.time.format("%d-%m-%Y").parse; // use capital Y for 4 digit years 

см https://github.com/d3/d3/wiki/Time-Formatting#format для всех различных модификаторов