2013-11-14 1 views
1

У меня возникла проблема с датами синтаксического анализа в файле csv. Ищите часы в Интернете и в книгах и тестировании, не найдя решения.d3.js ошибка даты синтаксического анализа с файлом csv

Возможно, кто-то может помочь.

Код отлично подходит для чтения файла с разборкой только чисел. Но при разборе файла с датами я получаю следующее сообщение об ошибке, указывающее формат даты не распознается:

Problem parsing d="MNaN,268.5466377440347LNaN,117.78741865509761LNaN ... 

файл выглядит следующим образом:

date,value 
11-11-13,582 
12-11-13,860 
13-11-13,940 

код : (js)

function myFunction() { 
     d3.csv('data/Date.csv', draw); 
} 

function draw(data) { 
    "use strict"; 
    var margin = 50, 
     width = 800 - margin, 
     height = 350 - margin; 

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

    var x_scale = d3.time.scale() 
     .domain(d3.extent(data,function(d){return d.date})) 
     .range([margin, width]); 

    var y_scale = d3.scale.linear() 
     .domain(d3.extent(data,function(d){return d.value})) 
     .range([height, margin]); 

    var x_axis = d3.svg.axis() 
     .scale(x_scale) 
     .orient("bottom"); 

    var y_axis = d3.svg.axis() 
     .scale(y_scale) 
     .orient("left"); 

    var line = d3.svg.line() 
     .x(function(d){return x_scale(d.date);}) 
     .y(function(d){return y_scale(d.value);}); 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.value = +d.value; 
    }); 

    d3.select("body") 
     .append("svg") 
     .attr("width", width+margin) 
     .attr("height", height+margin) 
     .append('g') 
     .attr("transform","translate(" + margin + "," + margin + ")"); 

    d3.select('svg') 
     .append('path') 
     .datum(data) 
     .attr ("class","line") 
     .attr('d', line); 

    d3.select("svg") 
     .append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(x_axis); 

    d3.select("svg") 
     .append("g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + margin + ",0)") 
     .call(y_axis); 
} 

<body> 
<button onclick="myFunction()">Show Graph</button> 
</body> 
+0

Примечание: это написано в js – user2992220

ответ

3

Вы должны переместить следующий код

data.forEach(function(d) { 
    console.log(d.date); 
    console.log(format.parse(d.date)); 
    d.date = format.parse(d.date); 
    d.value = +d.value; 
}); 

Только после того, как

var format = d3.time.format("%d-%m-%y"); 

Ваш исходный код, используемый разобранную дату до даты разобран :)

+1

Спасибо! Работает. – user2992220

2

Вы устанавливаете домен вашего x до фактического синтаксического анализа дат, то есть масштаб будет ожидать строки, а не даты как входные данные. Вам нужно переместить код

data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.value = +d.value; 
}); 

перед тем

var x_scale = d3.time.scale() 
    .domain(d3.extent(data,function(d){return d.date})) 
    .range([margin, width]); 

В общем, вы должны сделать какой-либо обработки в самом начале функции обработчика.

+0

Спасибо. Это действительно решение. – user2992220