CODEWITHSUNDEEP
d3.jsnvd3.js
hitesh israni
hitesh israni

Reputation: 1752

d3.js - Time scale with ticks in milliseconds

I need to plot a line graph where x-axis will have ticks representing time with milliseconds detail.

For x-scale, I am using d3.time.scale()

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

x-axis looks like:

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

But values/ticks on x-axis are not generating as expected.

x-axis with time scale

data for x-axis are date objects and they hold following values(sample data)

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

However if I take linear scale d3.scale.linear() Ticks generated follow a expected series.

x-axis with linear scale

whats the correct way of using time scale with data having millisecond details.

How can I have tick intervals in seconds:milliseconds?

EDIT:

Also, how can I have ticks every few milliseconds say every 500 ms?

there is an API d3.time.second but nothing like d3.time.millisecond. How can I add one?

Fiddle using time scale

Upvotes: 5

Views: 8090

Answers (2)

Eric Betts
Eric Betts

Reputation: 471

(Removed outdated previous answer)

I created an issue for this against the d3 project and it has been fixed: https://github.com/mbostock/d3/issues/1529

An example can be seen here: http://bl.ocks.org/mbostock/6618724

Upvotes: 1

Pandiyan Cool
Pandiyan Cool

Reputation: 6585

intervals in seconds:milliseconds means, you can try out this

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

Upvotes: 4

Related Questions