Just a quick note to say that I found your work on zooming at https://d3-graph-gallery.com/graph/interactivity_zoom.html to be a very useful starting point for a hands-on review of D3's imperative way of implementing zoom-and-pan with axes.
I need to review that topic in some depth before trying to port an interactive D3 visualization from a working React app to Svelte with its declarative approach. (Tom Février's video is useful in this regard, but I still have some work ahead of me.)
FYI, I made a few small changes to your code only tohelp me better understand the "moving parts":
Those additions led me to comment out the transform attr of the invisible (see above) so that it fit the svg's content area. (Otherwise, I noticed that attempting to pan or zoom when near the y-axis -- i.e., within the chart content but outside of the invisible -- failed.)
I also chained translateExtent() to the zoom behavior function to 'lock' the limits of the x- and y-scale domain arrays (which works as expected after setting the min scaleExtent to '1'.
Hi, Yan,
Just a quick note to say that I found your work on zooming at https://d3-graph-gallery.com/graph/interactivity_zoom.html to be a very useful starting point for a hands-on review of D3's imperative way of implementing zoom-and-pan with axes.
I need to review that topic in some depth before trying to port an interactive D3 visualization from a working React app to Svelte with its declarative approach. (Tom Février's video is useful in this regard, but I still have some work ahead of me.)
FYI, I made a few small changes to your code only tohelp me better understand the "moving parts":
I used only a few data points...
// Add circles scatter .selectAll("circle") .data([data[4], data[27], data[73]])
I styled the scatter's with an outline -- a tip I found on SO here (@gavgrif's answer)...
let scatter = SVG.append('g') .attr("clip-path", "url(#clip)") .style('outline', '2px solid red')
...and gave the 'invisible' some visibility with an outline and a fill...
SVG.append("rect") .attr("width", width) .attr("height", height) .style("fill", "#f5f5dc83") .style('outline', '2px solid rebeccapurple') .style("pointer-events", "all") //.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') .call(zoom);
(A screenshot is attached.)
Those additions led me to comment out the transform attr of the invisible (see above) so that it fit the svg's content area. (Otherwise, I noticed that attempting to pan or zoom when near the y-axis -- i.e., within the chart content but outside of the invisible -- failed.)
I also chained translateExtent() to the zoom behavior function to 'lock' the limits of the x- and y-scale domain arrays (which works as expected after setting the min scaleExtent to '1'.
let zoom = d3.zoom() .scaleExtent([1, 20]) .extent([[0, 0], [width, height]]) .translateExtent([[0, 0], [width, height]]) .on("zoom", updateChart);
Overall: Thanks again, and Regards,
--Nick/