繁体   English   中英

d3.js:仅想比较HH:MM时,时间刻度是否适合x轴?

[英]d3.js: Is a time scale appropriate for the x-axis when only wanting to compare HH:MM?

我想创建比较多组数据的图表。 集合中的每个对象的Y轴都有一个浮点值,X轴有一个“ 2013-01-11T00:00:00Z”形式的值。

我的数据结构如下:

{
  data_set_a:
    line_1:
      [ { x: x, y: y}, ... ]
    line_2:
      [ { x: x, y: y}, ... ]
  data_set_b:
    line_1:
      [ { x: x, y: y}, ... ]
    line_2:
      [ { x: x, y: y}, ... ]

   ...
  }

注意:如果有其他意义/更简单,我可以完全控制数据集。

对于以下问题,我仅对绘制data_set_a中的内容感兴趣。 其余的将是单独的图形。

  1. 当X轴处理日期时,我是否要在时间范围内使用序数比例尺并使用time.format.iso.parse进行解析? 有没有办法告诉d3比较“ HH:MM”,然后为X轴文本指定一个自定义格式(即12pm | | | 1pm等,其中|是15m间隔的刻度)? 还是此任务更适合我在传递给d3之前处理日期的顺序刻度?

  2. 我正在尝试通过部分示例来说明如何设置一条直线以用于图表上显示的所有直线。 如何设置比例尺和域,使其考虑到适用于系列中所有线条的范围?

这是我到目前为止的位置: https : //gist.github.com/87e52b278c3ab2ada196 只是说我的图表还不太漂亮。 提前致谢。

首先,D3配备了时间尺度的开箱。 看看那些。

其次,为了正确设置所有数据点的比例,您需要计算所有数据点的范围:

var data = /* your data from above */,
    points = [].concat(d3.values(data.data_set_a)),
    x_extent = d3.extent(points, function(d) { return d.x; }),
    y_extent = d3.extent(points, function(d) { return d.y; });

有了这些信息,您应该能够正确设置秤。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM