d3.js - 毫秒级时间刻度的时间比例尺

Question

我需要绘制一条线图，其中x轴上的刻度表示毫秒级时间。

对于x轴比例尺，我正在使用。

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()，则生成的刻度会遵循预期的序列。 对于具有毫秒细节的数据，使用时间刻度的正确方法是什么？

如何以秒:毫秒的间隔设置刻度？

编辑：还有，如何每隔几毫秒（例如500毫秒）设置一次刻度？

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

使用时间刻度的 Fiddle。

- hitesh israni

---

你需要在x轴上使用13:25:6 794格式吗？ - Pandiyan Cool

Answer 1

间隔时间以秒:毫秒表示，您可以尝试使用此功能。

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

- Pandiyan Cool

---

好的，我尝试过了。.ticks(d3.time.second, 0.2)这一行已经被注释了，就像问题中提到的那样。但它并没有达到预期的效果，我本来期望会绘制更多的刻度线，但只有两根刻度线，分别是 13:25:07 000 和 13:25:08 000。 - hitesh israni

Answer 2

(删除过时的先前答案)

我在d3项目中为此创建了一个问题，并已解决：https://github.com/mbostock/d3/issues/1529

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

- Eric Betts

---

谢谢Eric。"JavaScript日期对象的分辨率可以达到毫秒级，但它们的表示通常不包括这一点。"我也有同样的猜测。但我认为一定有办法，也有人已经做了我想要的事情，所以我没有去在git:mbostock/d3上发布问题。 - hitesh israni