d3.js使用csv文件解析日期錯誤

我在解析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>

來源

2013-11-14 user2992220

備註：這是寫在js – user2992220

你應該將下面的代碼後

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");

你原來代碼中使用的日期被解析之前:)

來源

2013-11-14 16:11:29 ZillGate

謝謝！它正在工作。 – user2992220

您設置的域名解析您的日期x尺度，然後實際解析日期，即尺度將期望字符串而不是日期作爲輸入。您需要

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

一般移動代碼

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

，你應該就在處理函數的開始做任何處理。

來源

2013-11-14 16:13:27

謝謝。這確實是解決方案。 – user2992220

d3.js使用csv文件解析日期錯誤

回答

相關問題