D3ズーム＆パン - グラフ上の任意の場所でズームとパンを有効にし、パンとズームの範囲内で円を表示する方法を制限する

Question

zoomとpanオプションを使用してD3図書を使用してタイムラインチャートを作成しようとしています。ここにjsfiddle - https://jsfiddle.net/avavzgLy/があります。

x軸のティックにカーソルを合わせるか、グラフ内でCirclesを超えた場合にのみ、ズームとパンが可能です。グラフ上の任意の場所に移動することで、ズームとパンを許可する方法を教えてください。また、ズーム/パンニング中に、チャート内の円は、x軸ドメイン範囲に達するとまだ表示され、svg幅に達したときに消えます。

Answer 1

ClipPathSVG要素を使用して上記の問題に対処しました。更新された作業クリップ - https://jsfiddle.net/avavzgLy/1/