D3 Zoom & Pan - How to enable zooming & panning anywhere on the chart and restrict showing circle within the range while panning & zooming

Question

I'm trying to develop a timeline chart using D3 libary with zoom and pan options. Here is the jsfiddle - https://jsfiddle.net/avavzgLy/.

I'm able to zoom and pan only when I hover on x axis ticks or over Circles in the chart. How can I allow zooming and panning by hovering anywhere on the chart. Also while zooming/panning, the circles inside chart is still getting displayed when it reaches x axis domain range and gets disappeared only when it reaches svg width.

Stick a rect element in under (or even over) everything and use that to catch zoom/pan events on otherwise empty areas. — Robert Longson

sureshd sureshd · Accepted Answer · 2017-04-04T14:30:37

I addressed the above mentioned issues by using ClipPath SVGelement. Updated working jsfiddle link - https://jsfiddle.net/avavzgLy/1/

D3 Zoom & Pan - How to enable zooming & panning anywhere on the chart and restrict showing circle within the range while panning & zooming

1 Answers