使用 d3.js 进行日期排序

Posted 2023-02-22

【中文标题】使用 d3.js 进行日期排序

【英文标题】：Date Sorting with d3.js

【发布时间】：2014-11-21 21:48:41

【问题描述】：

免责声明：我不知道自己在做什么。说真的，我喜欢数据可视化，并认为自己做这件事将是学习编程和使用数据库并使 Web 应用程序像个酷人一样的好方法。前一天我一直在寻找答案，而我能找到的所有示例都无法使用我的代码。

这是我正在使用的完整代码和数据的粘贴箱。这是在 d3.js github 上找到的示例折线图，其中填写了我的数据。 http://pastebin.com/7aW6wegd

json 来自 couchdb 数据库

我可以画线，但它们很乱：

我认为这是由于日期排序不正确造成的，因为在控制台中它们被无序列出。我不知道如何正确排序日期。使用 d3.time.format 会引发错误（您实际上可以在我从示例折线图中获取的代码中看到它，他们使用它来解析日期。将它与我的数据一起使用会引发错误，即使在我尝试转向日期的时间戳），我似乎也不知道如何让日期在 couchdb 中排序。

【问题讨论】：

老实说，第一次尝试看起来不错。只需在定义日期对象之前对日期进行排序。 github.com/mbostock/d3/wiki/Arrays

【参考方案1】：

为什么不在填充date 属性的forEach 之后对数据进行排序？下面是对象数组排序器的一个非常基本的实现：

var data = [
         date: new Date(2000),
         date: new Date(1000)
    ];

function sortByDateAscending(a, b) 
    // Dates will be cast to numbers automagically:
    return a.date - b.date;


data = data.sort(sortByDateAscending);

Array.prototype.sort 有一个不错的 documentation。

【讨论】：

谢谢。这非常有效。我试图编写/借用一些都失败的排序函数。这一次比我找到的最简单的要短 2 或 3 行。

国际标准为yyyy/dd/mm时，不知道为什么返回mm/dd/yyyy

@Claudiu 出于某种原因，OP 决定使用 d3.time.format("%x") 格式化日期（参见 pastebin 上的第 46 行）。根据文档，它将日期格式设置为“%m/%d/%Y”，请参阅github.com/mbostock/d3/wiki/Time-Formatting#format 如果您愿意，可以选择其他格式。

这对我有用。我使用的是d3.bisector，它依赖于排序的数组值，直到我正确排序日期后它才能工作