Question

我尝试使用csvfile中的值创建d3.js的折线图。

我已经介绍了如何使用d3制作图表的几个例子。但是，此折线图的结果并不准确。

这是我正在使用的数据示例：

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

这是我使用的代码：

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

我尝试改进此代码更改formatDate变量，但结果是相同的。

是否有改进此图表的选项？

Answer 1

Your data has wrong definition. Maybe you're spanish but D3 Time Format just recognize english months. Change your months like so:

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

And your data become:

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

d3折线图和日期值

1 个答案: