Not able add zoom/pan on scatter plot - d3.js

Question

I created a scatter plot using D3.js.I would like to add the functionality to zoom and pan.
I have declare zoom behaviour for scatter plot.Try to use it in svg element.
But it throws error says argument of type zoom behavior is not assignable to parameter of type selection:selection SVGElement
I am just a beginner with using D3.Can anyone help or have any suggestions?
var zoom = d3.zoom()
.scaleExtent([0.3, 2])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
});
var svg = d3.select(component).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.call(zoom);

Answer 1

Welcome to Stack Overflow.
You need to provide a function to the onzoom handler
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
});
should look more like this, where you are calling your own function and passing it the transform as a parameter
d3.select(context.canvas).call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", () => zoomed(d3.event.transform)));
The zoomed function could be this:
function zoomed(transform) {
context.save();
context.clearRect(0, 0, width, height);
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
context.beginPath();
for (const [x, y] of data) {
context.moveTo(x + r, y);
context.arc(x, y, r, 0, 2 * Math.PI);
}
context.fill();
context.restore();
}
These snippets were taken from this example:
https://observablehq.com/#d3/zoom-canvas