【问题标题】:d3.js - Time scale with ticks in millisecondsd3.js - 以毫秒为单位的时间刻度
【发布时间】:2013-08-29 23:41:20
【问题描述】:

我需要绘制一个折线图,其中 x 轴将有刻度,表示时间和毫秒细节。

对于x-scale,我使用的是d3.time.scale()

var xScale = d3.time.scale()
    .range([0, width])

x 轴的样子:

var xAxis = d3.svg.axis()
    .scale(xScale)   
    //.ticks(d3.time.second, 1)
    .orient("bottom")        
    .tickFormat(d3.time.format("%H:%M %L"));

但 x 轴上的值/刻度未按预期生成。

x 轴的数据是日期对象,它们包含以下值(示例数据)

13:25:6 794 (%H:%M%S %L)
13:25:6 898 
13:25:6 994 
13:25:7 95 
13:25:7 194 
13:25:7 295 
13:25:7 395 
13:25:7 495 
13:25:7 595 
13:25:7 710 
13:25:7 795 
13:25:7 895
13:25:7 995 
13:25:8 95 
13:25:8 195 
13:25:8 294
13:25:8 395 
13:25:8 495
13:25:8 594
13:25:8 795 

但是,如果我采用线性刻度 d3.scale.linear() 生成的报价遵循预期的系列。

time scale 与具有毫秒详细信息的数据一起使用的正确方法是什么。

如何以秒为单位设置刻度间隔:毫秒?

编辑:

另外,我怎样才能让每几毫秒的滴答声说每 500 毫秒?

有一个 API d3.time.second,但没有像 d3.time.millisecond 这样的 API。如何添加?

Fiddle using time scale

【问题讨论】:

  • x轴需要13:25:6 794格式吗?

标签: d3.js nvd3.js


【解决方案1】:

(删除过时的先前答案)

我为此针对 d3 项目创建了一个问题,该问题已得到修复:https://github.com/mbostock/d3/issues/1529

可以在这里看到一个例子:http://bl.ocks.org/mbostock/6618724

【讨论】:

  • 谢谢埃里克。 "javascript Date objects have resolution down to the millisecond, their representation often doesn't include this." 我也有同样的猜测。但我认为一定有办法,而且一定有人做了我想要的,所以我决定去git:mbostock/d3 发布这个问题
【解决方案2】:

intervals in seconds:milliseconds 的意思,你可以试试这个

.tickFormat(d3.time.format("%S %L"));

【讨论】:

  • :D 我确实试过了。 .ticks(d3.time.second, 0.2) 该行已被注释掉,如问题所示。它可以完成这项工作。我期待绘制更多的刻度。但只能看到 2 个刻度。 13:25:07 000 13:25:08 000
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 1970-01-01
相关资源
最近更新 更多