To make things look a little nicer, I've been trying to make use of a variation on the tickSubDivide workaround. I got the result I wanted here, but my implementation was extremely limited (change the slider and things don't look so pretty anymore).
I changed my tack and tried to calculate the "fake" axis based on the tick count from the "real" axis, but I ran into more problems when I realized that it wasn't just the tick count changing, but the values that each tick represents.
My next step is is to iterate through each .tick
and generate new line
elements in between the tick I'm on and the next tick, and then go back and fill in the ticks at the beginning... this seems like it'll become a bear.
I'm wondering if it wouldn't be worth not using axis
to do this... perhaps creating the ticks myself might be more efficient in the long run?
I figured I'd ask the experts if there is a better way to pull this off, before I end up doing something silly.
In case it wasn't apparent, the effect I'm going for is this:
| | | | | | | | | | | | |
| | 1 | | | 2 | | | 3 | |
| | | |
but will probably end up settling for this:
| | | | | | |
| 1 | 2 | 3 |
| | | |
The scale's range/domain needs to be entirely dynamic.
Edit: Did I mention I wanted to use d3.time.scale
? My first sweep produces some weird results... see the difference between 202 and 203 on the slider (use the keyboard to get accuracy):
http://jsbin.com/InEFISa/4/edit
Edit II: Made another attempt that involved filling in existing ticks..
http://jsbin.com/AmIFAci/1/edit
I imagine what I'm doing is costly, but I've not measured performance. It's also somewhat sloppy... I'm calling minorAxisGroup.selectAll('g').remove()
instead of binding my newly constructed points
array with .data()
, which isn't in the spirit of D3. I'll probably adjust that.
I'll try extending .axis()
another time. I'm not entirely sure how to go about rendering twice as many ticks as possible... I have a few ideas but also some concerns.