I have an SVG graph which works perfectly with d3 zoom. However, the requirement was to add the slider and control the zooming with the slider as well as the mouse wheel.
The issue I am facing now is I generate a transform object such as: let sliderScale = zoomIdentityManual.scale(newK); // newK is the new scale based on slider I calculate it.
It is fine again. But when the user starts to zoom by mouse right after slider, the graph jumps around. And I can see why. because the event from the mouse is working completely separate than the transform object I generate manually.
I found this example, (http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5) and the main difference is the version of d3. It is v3 and I am using v4. as you can see in the slided function:
function slided(d) {
zoom.scale(d3.select(this).property("value"))
.event(svg);
}
looks like it does .event(svg) and that is where makes the current event change. But Version 4 does not have such a method.
All in all, is there any method to do slider and d3 zoom work smoothly together?
my issue was I was not zooming properly when slider was moving. I was calling the function directly, but I needed to do call the zoom action on the svg like:
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
zoom.transform was the trick