Hello,
I am trying to implement Zoom on this example:
I found several examples of zoom, with axes and without. Generally you need to select an area, call zoom there and this zoom is a d3.zoom which then calls another self programmed function where the graph is redrawn.
So I added this:
and this at the bottom
Of course the actual redrawing is missing. I also find examples of defining a viewport or d3.selectall. How does it work?
https://www.d3indepth.com/zoom-and-pan/
I am trying to implement Zoom on this example:
Educative Answers - Trusted Answers to Developer Questions
Level up your coding skills. No more passive learning. Interactive in-browser environments keep you engaged and test your progress as you go.
www.educative.io
I found several examples of zoom, with axes and without. Generally you need to select an area, call zoom there and this zoom is a d3.zoom which then calls another self programmed function where the graph is redrawn.
So I added this:
JavaScript:
let zoom = d3.zoom()
.scaleExtent([0.5, 10])
.extent([[0, 0], [width, height]])
.on('zoom', NeuerChart);
and this at the bottom
JavaScript:
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.attr("transform", "translate(" + 100 + "," + 100 + ")")
.call(zoom);
function NeuerChart () {
// recover the new scale
var newX = d3.event.transform.rescaleX(xScale);
var newY = d3.event.transform.rescaleY(yScale);
// update axes with these new boundaries
xAxis.call(d3.axisBottom(newX))
yAxis.call(d3.axisLeft(newY))
}
Of course the actual redrawing is missing. I also find examples of defining a viewport or d3.selectall. How does it work?
Zooming in d3.js
How zooming works in d3.js: a set of tiny examples with code illustrating different techniques.
d3-graph-gallery.com