d3.js - 如何在 d3.js v3 中使用年份计算事件并绘制折线图

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 的实际日期格式） 10/20/2016 10/25/2016 11/17/2016 1/25/2017 3/13/2017 4/13/2017 4/21/2017 2017 年 5 月 4 日 2017 年 5 月 3 日 2017 年 6 月 2 日 2017 年 6 月 2 日 2017 年 6 月 8 日 2017 年 6 月 8 日 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 中的日期格式感到抱歉

应该是这样的

数据集1图像

（这是实际格式）

这是示例结果

示例图表结果

这是数据集 2 的数据格式

数据集 2

很抱歉，如果我的问题难以阅读，我通常会在堆栈溢出中发布。

标签： d3.js

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 等

图形