1

I am currently working with d3.js and have to work with seconds and microseconds. For this I intend to use a axis that is formatted similar to this:

enter image description here

I tried using two x-axes but the problem is that I don't know how to make the µ-sec axis dependent on the sec axis in order to restart the µ-sec numeration from zero after a new sec tick.

Here's a example of a data entry: 

{"id": 0, "start": 5667572130, "end": 5667581035, "taskName": "t"},

And heres how I initialize the two axes:

x = d3.scale.linear().domain( [ timeDomainStart, timeDomainEnd ] ).range( [ 0, width ] ).clamp( true );
x2 = d3.scale.linear().domain( [ timeDomainStart/1000000, (timeDomainEnd/1000000) ] ).range( [ 0, width ] ).clamp( true );
xAxis = d3.svg.axis().scale( x ).orient( "bottom" ).tickSize( 4 ).tickPadding( 4 ).ticks(5);
x2Axis = d3.svg.axis().scale( x2 ).orient( "bottom" ).tickSize( 8 ).tickPadding( 8 ).tickFormat( d3.format( "f" ) ).ticks(10);

Here's a jsfiddle, it is based one following gantt example https://dk8996.github.io/Gantt-Chart/

CDanU
  • 156
  • 1
  • 9
  • Possibly related: http://stackoverflow.com/questions/19242674/major-and-minor-ticks-with-v3-of-d3 – explunit May 28 '14 at 15:21
  • And this: http://stackoverflow.com/questions/18900469/minor-ticks-like-a-ruler-on-a-dynamic-axis-with-d3 – explunit May 29 '14 at 17:17
  • Thanks for those links they helped me to figure out that this does not work with the normal axis generation style. I have to first search positions in the axis where I have full seconds (without nanoseconds), place ticks there and then generate some ticks for the nanoseconds according to the width for one second tick to the next second tick. I guess making this with plain svg+js will be easier and d3.js will not be helpfull for this case. – CDanU May 30 '14 at 15:23

0 Answers0