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文件解析日期错误

回答

相关问题