How to zoom the path in d3.js?

1
2
3
4
5

var zoom = d3.zoom()
    .scaleExtent([1, 10])  // Set the minimum and maximum scale levels
    .on("zoom", function () {
        svg.attr("transform", d3.event.transform);  // Apply the zoom transform to the SVG element
    });

1
2

var svg = d3.select("svg")
    .call(zoom);  // Attach the zoom behavior to the SVG element

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var path = svg.append("path")
    .attr("d", "M10 10 L50 50 L100 10")  // Example path data
    .style("stroke", "black")
    .style("fill", "none");

// Define how the path should behave when zooming
function zoomed() {
    path.attr("transform", d3.event.transform);
}

// Call the zoom behavior on the SVG element
svg.call(zoom);