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 () {
var newX = d3.event.transform.rescaleX(xScale);
var newY = d3.event.transform.rescaleY(yScale);
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