Question

我想问一下如何使用csv文件中的数据绘制折线图。

我已经成功使用示例数据集中的csv文件创建了折线图，并使用代表其频率的数据值对其进行了绘制。

例如日期频率 2000年1月1日39.81 2000年2月1日36.35 2000年3月1日43.22 2000年4月1日28.37 2000年5月1日25.45 2000年6月1日32.54 2000年7月1日28.4 2000年8月1日28.4

接下来我要做的是，仅使用日期，并以该日期的年份为基准，计算相应年份的事件数。

例如：日期（这是csv中的实际日期格式） 2016年10月20日 2016年10月25日 2016年11月17日 2017年1月25日 2017/3/13 2017年4月13日 2017年4月21日 5/4/2017 5/3/2017 2017年6月2日 2017年6月2日 6/8/2017 6/8/2017 2017/6/12

所以对于2016年，我有3个事件或频率。对于2017年，我有11个，然后使用结果将其绘制在折线图上。

这可能吗？

注意：我正在使用d3.js。 v3

我在数据集1和数据集2中使用了不同的CSV文件

我尝试并成功实现了类似于链接中找到的代码

https://www.d3-graph-gallery.com/graph/line_several_group.html

示例代码：

parseDate = d3.time.format("%b %d %Y").parse;

incidentline = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.frequency); });


d3.csv('/samplegraphdata.csv', function (error, data) {

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

    // Scale the range of the data
    x.domain(d3.extent(data, function (d) { return d.date; }));
    y.domain([0, d3.max(data, function (d) { return d.frequency; })]);

预期结果应为折线图，其x轴为年份，y轴为计数。

并且正在从CSV读取数据。

我还没有任何实际结果，因为现在我只是想弄清楚该怎么做。

我很抱歉CSV中日期的格式

应该是这样

dataset1 image

（这是实际格式）

这是示例结果

sample Graph Result

这是数据集2的数据格式

dataset 2

很抱歉，如果我的问题难以理解，我通常会在堆栈溢出中发帖。

Answer 1

我实际上成功统计了数据。

这就是解决方案

    data.forEach(function (d) {
        var splitdate = d.Date;
        console.log(d.Date);
        var year = splitdate.split('/')[2];


        tally[year] = (tally[year] || 0) + 1;
        console.log(tally[year]);

    });

    var data = [];

    for (var year in tally) {
        if (tally.hasOwnProperty(year)) {
            data.push({
                year: year,
                frequency: tally[year]
            });
            console.log(data);

我的问题是如何清洁x轴以反映正确的年份。

我不知道为什么变成.016 .017等

Graph

如何在d3.js v3中使用年份对事件进行计数并绘制折线图

1 个答案: