Feedback for brushing

[holtzy]

trafficstars

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/