csv 파일에서 d3.js 구문 분석 날짜 오류가 발생했습니다.

csv 파일에서 날짜를 구문 분석하는 데 문제가 있습니다. 솔루션을 찾지 못한 채 온라인 및 서적 및 테스트를 찾고 있습니다.csv 파일에서 d3.js 구문 분석 날짜 오류가 발생했습니다.

누군가가 도움을 줄 것입니다.

코드는 숫자 만 파싱하여 파일을 읽는 데 적합합니다. 날짜와 파일을 구문 분석 할 때하지만 난 날짜 형식을 나타내는 다음과 같은 오류 메시지가 인식되지 않습니다 얻을 :

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>

,451,515,

출처

2013-11-14 user2992220

비고 : 이것은 js로 작성되었습니다 – user2992220

당신은 날짜를 해석하기 전에 :

출처

2013-11-14 16:11:29 ZillGate

고마워요! 효과가 있습니다. – user2992220

당신의 도메인을 설정됩니다

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

원래 코드가 구문 분석 날짜를 사용

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

바로 뒤에 다음 코드를 이동해야합니다 당신의 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

csv 파일에서 d3.js 구문 분석 날짜 오류가 발생했습니다.

답변

관련 문제