JavaScript D3 Zoom on a chart with axes and circle line graph

[Dvdscot]

Hello,

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:

            let zoom = d3.zoom()
                .scaleExtent([0.5, 10])
                .extent([[0, 0], [width, height]])
                .on('zoom', NeuerChart);

and this at the bottom

            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

https://www.d3indepth.com/zoom-and-pan/

 

[Dvdscot]

Maybe that example is too complicated, I found simpler code in this video:


Basically the actual zooming has to be programmed and it is like repeating its own code. First draw the graph, in the zoom function redraw it simpler.

 

[Dvdscot]

I added the code here in Codepen:

https://codepen.io/Dvdscot/pen/zYjpzVP

This is how it should work:

https://codepen.io/Dvdscot/pen/BaxJdKN