Feedback for brushing

[holtzy]

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/