d3 꺾은 선형 차트 및 날짜 값

csvfile의 값을 사용하여 d3.js로 꺾은 선형 차트를 만들려고합니다.d3 꺾은 선형 차트 및 날짜 값

나는 d3을 사용하여 차트를 만드는 방법에 대한 몇 가지 예를 따라 왔습니다. 그러나이 꺾은 선형 차트의 결과는 정확하지 않습니다.

var m = [25, 50, 25, 50], 
    w = 700 - m[1] - m[3], 
    h = 400 - m[0] - m[2]; 
var formatDate = d3.time.format("%d-%b-%y").parse; 
var x = d3.time.scale().range([0, w]); 
var y = d3.scale.linear().range([h, 0]); 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom').ticks(5); 
var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient('left').ticks(5); 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.dates); }) 
    .y(function(d) { return y(d.count); }); 
var svg = d3.select('#graph') 
    .classed("svg-container", true) 
    .append('svg') 
    .attr("preserveAspectRatio", "xMinYMin meet") 
    .attr("viewBox", "0 0 850 1000") 
    .classed("svg-content-responsive", true) 
    .append('g') 
    .attr('transform', 'translate(' + m[3] + ',' + m[0] + ')'); 
d3.csv('datesdata.csv', function(error, dataset) { 
    dataset.forEach(function(d) { 
     d.dates = formatDate(d.dates); 
     d.count = +d.count; 
    }); 
    x.domain(d3.extent(dataset, function(d) { return d.dates; })); 
    y.domain([0, d3.max(dataset, function(d) { return d.count; })]); 
    svg.append('path') 
     .attr('class', 'line') 
     .attr('d', valueline(dataset)); 
    svg.append('g') 
     .attr('class', 'x axis') 
     .attr('transform', 'translate(0,' + h + ")") 
     .call(xAxis); 
    svg.append('g') 
     .attr('class', 'y axis') 
     .call(yAxis); 
});

나는 변경이 코드를 개선하기 위해 노력 :

dates,count 
17-dic-12,1 
18-abr-13,1 
11-oct-13,1 
12-dic-13,1 
08-jul-14,4 
30-jul-14,4 
01-ago-14,1 
22-oct-14,3 
30-oct-14,1 
24-nov-14,1 
02-dic-14,1 
24-dic-14,1 
14-ene-15,4 
15-ene-15,1 
22-ene-15,2 
12-feb-15,1 
17-abr-15,1 
24-jun-15,1 
15-jul-15,2 
25-ago-15,1 
28-ago-15,1 
31-ago-15,1 
01-sep-15,1 
17-sep-15,1 
24-dic-15,1

이 내가 사용하는 코드는 다음과 같습니다

이

내가 함께 일하고 있어요 데이터의 예입니다 formatDate 변수이지만 결과는 같습니다.

이 차트를 개선 할 수있는 옵션이 있습니까?

출처

2016-07-11 estebanpdl

'을 console.log() formatDate (d.dates)'의'결과'. d3이 그것들에 대해 알지 못하기 때문에 그것은 영어로되어 있지 않은 모든 달 이름 ('dic','abr','ago')에 대해 아마 비어 있습니다. CSV 또는 자바 스크립트에서 해시를 사용하여 월 이름을 바꾸거나 아니면 복잡해 보입니다. 스페인어 월 약어를 정의하는 로캘 객체를 d3에 제공 할 수 있습니다. 그 마지막 작업을 수행하는 방법을 이해하려면 d3 소스로 다이빙을해야합니다. – meetamit

네, 확실히 파싱 날짜에 관한 문제입니다. 날짜 문자열을 ISO 형식으로 변환하면 아마 작동 할 것입니다. – reptilicus

정확히! @ meetamit이 말했듯이, 나는 영어 형식으로 날짜를 변경했습니다. 이제 작동합니다. 감사 – estebanpdl

데이터의 정의가 잘못되었습니다. 어쩌면 당신은 스페인어지만 D3 시간 형식은 영어 만 인식합니다.

ene --> jan * 
feb --> feb 
mar --> mar 
abr --> apr * 
may --> may 
jun --> jun 
jul --> jul 
ago --> aug * 
sep --> sep 
oct --> oct 
nov --> nov 
dic --> dec *

을 그리고 데이터가 될 : 그래서처럼 개월을 변경

dates,count 
17-dec-12,1 
18-apr-13,1 
11-oct-13,1 
12-dec-13,1 
08-jul-14,4 
30-jul-14,4 
01-aug-14,1 
22-oct-14,3 
30-oct-14,1 
24-nov-14,1 
02-dec-14,1 
24-dec-14,1 
14-jan-15,4 
15-jan-15,1 
22-jan-15,2 
12-feb-15,1 
17-apr-15,1 
24-jun-15,1 
15-jul-15,2 
25-aug-15,1 
28-aug-15,1 
31-aug-15,1 
01-sep-15,1 
17-sep-15,1 
24-dec-15,1

Here the working code

출처

2016-07-11 23:26:56 Klaujesi

d3 꺾은 선형 차트 및 날짜 값

답변

관련 문제