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

How to plot time data on a D3.js line graph

本文关键字：绘制 时间 数据 D3 js      更新时间：2023-09-26

我有大量与时间相关的数据。我想画一个简单的线形图。一个简单的例子:

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");

注:"最小"answers"最大"变量是我的数据数组中最小和最大的大小值，在其他地方计算。显然，这是错误的，因为这会在坐标轴上绘制每个时间值(如上所述，我不想这样做)，即使我这样做了，也会出现可怕的错误和故障。

我将如何去实现我想要实现的目标?

谢谢——Gaweyne

解决了。d3.time。Scale .linear()

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