Question

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

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）在轴上绘制时间，直到我达到最新时间在我的数据数组中。同时，我想绘制每个大小的值。因此，图表仅显示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");

NB＆＃34;最小的＆＃34;和＃34;最大＆＃34;变量是我的数据数组中最小和最大的大小值，在别处计算。显然这是错误的，因为这会在轴上绘制每一个时间值（如上所述，我不希望这样），即使我做错了也可能出现故障。

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

THX - Gaweyne

Answer 1

解决了它。 d3.time.scale not d3.scale.linear（）

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

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

1 个答案: