I implemented d3 slider control allowing to navigate through data serie displayed along time axis.
I'm trying to isolate/solve problem with drag events coming too seldom (more than one second interval), when data set is large enough (entire data array is inlined in html page, so page weights about 13 megabytes).
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test1.html
Drag looks jumpy in chrome, but is smooth in firefox.
data array has only about 300 elements, and elements contains lot of data including nested arrays, but I only use one property in every element named 'end'.
I tried to reduce data array size, leaving same amount of elements, but only left 'end' property in every element, so this change doesn't impact functionality, only page size.
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test2.html
With these changes drag looks much more smoothly on chrome.
Appreciate any help, including ideas about how to isolate problem. I tried to use Chrome Timeline, what I see there is that my onDrag handler executes very fast (matter of 1 ms) yet I still have substantial gaps between onmousemove calls.
Added:
I managed to find some almost working solution - I added drag behavior event listeners to raw mouse events instead, like
//var dragBehavior = d3.behavior.drag()
// .on("dragstart", onDrag.bind(this))
g.on("mousedown", onDragStart.bind(this));
...
Now it works much more smoothly, which makes me thinking that problem is somewhere in drag behavior code. isolated-test3.html has workaround to compare:
Of course I'd prefer using drag behavior, as it solves number of problems and supports touch events as well.