如何获取JSON数据并使用d3.js创建折线图？

Question

我有一个回复大型JSON数组的PHP脚本。这只是其中的一小部分：

{
"BR_RioDeJaneiro": [
    {
        "timeRange": "12:00:00 AM-12:19:59 AM",
        "average": "4.3653"
    },
    {
        "timeRange": "12:20:00 AM-12:39:59 AM",
        "average": "4.5386"
    }
]
}

时间范围实际上达到11:50:00 AM-11:59:59 PM。我希望timeRange成为域，average成为范围。我想创建一个折线图，可以显示每个时间范围内的平均值。我知道有一个d3.json()函数可用于获取json数据，但我很难理解如何设置域，范围和创建可视化。感谢。

Answer 1

本教程介绍了您要求如何操作的大部分内容：

http://www.recursion.org/d3-for-mere-mortals/

它构建了一个由日期和值组成的基于路径的折线图。

在您的情况下，您需要做一些工作来将字符串日期范围转换为可用于绘制的真实日期。

另外，只是一个注释，如果时间范围是连续的（即每个时间范围从最后结束时开始），您不需要关心结束日期。