如何在 D3.js 折线图上绘制时间数据答案

【问题标题】：How to plot time data on a D3.js line graph如何在 D3.js 折线图上绘制时间数据
【发布时间】：2015-10-19 09:01:33
【问题描述】：

我有大量与时间相关的数据。我想绘制一个希望是简单的折线图。一个简化的例子：

var data = [{ time: 13:30, size: 100 }, { time: 13:37, size: 500}, { time: 13: 42, size: 300 } 
{ time: 13:51, size: 150 }, { time: 13:56, size: 175 }, { time: 15:59, size: 75 }
{ time: 16:11, size: 75 }, { time: 16:37, size: 125 }, { time: 15:27, size: 200 } [...] 
{ time: 20:36, size: 500 }]

许多时间值，以及相应的大小值。当然，我不想在这张图上绘制每一个时间值。相反，我想取最低值 13:30，然后以 30 分钟间隔（即 13:30、14:00、14:30 ... 20:30）在轴上绘制时间，直到我达到最新时间在我的数据数组中。同时，我想绘制 every 大小值。因此，该图将仅显示 13:30 和 14:00 的刻度，但对应于 13.37、13.42、13.51、13.56 的值将绘制在该线上。

我该怎么做呢？

我的第一次尝试是这样的：

var graph = d3.select('.graph'),
    WIDTH = 790,
    HEIGHT = 250,
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
       }

  xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]),
  yScale = d3.scale.linear().range([HEIGHT - MARGINS.top,   MARGINS.bottom]).domain([smallest, largest]),
  xAxis = d3.svg.axis().scale(xScale),
  yAxis = d3.svg.axis().scale(yScale).orient("left");

注意“最小”和“最大”变量是我的数据数组中的最小和最大大小值，在别处计算。显然这是错误的，因为这会在轴上绘制每个时间值（如上所述，我不想要这个），即使我这样做了错误和可怕的故障。

我将如何实现我想要实现的目标？

谢谢 -- 高文

【问题讨论】：

标签： javascript d3.js time

【解决方案1】：

解决了。 d3.time.scale 不是 d3.scale.linear()

xScale = d3.time.scale(range([MARGINS.left, WIDTH - MARGINS.right]).domain(new Date([//Earliest Date//]), new Date([//Latest Date//]))

【讨论】：