D3 zoom on a chart with axes and circle line graph

See more:

Javascript

graph

d3js

Zoom

Hello,

I am trying to implement Zoom on this example:
How to create a line chart using D3[^]

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?

D3 Zoom and Pan | D3 in Depth[^]

D3 Zoom for SVG Lines and SVG Paths - D3.js v3 Tutorial - YouTube[^]

What I have tried:

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.

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