d3.js でズームインすると散布図のポイントの値が維持されない

Question

d3.js を初めて使用するので、しばらくお待ちください。これを純粋な JavaScript として vue.js ファイルに実装しました。 ズーム機能を使用して散布図を作成しようとしています。これまでのところ、ほぼすべてが正常に動作していますが、ズームすると、X 軸が正しくスケーリングされていないことに気付きますが、Y 軸は正常に動作しています。たとえば、元のグラフを見ると、点は X 軸の約 625 にある可能性がありますが、同じ点を拡大すると 600 より小さくなります。これは Y 軸では起こりません。ポイントは正しくスケールされます。スケーリング関数の X 軸のスケーリングに何か問題があると考えられますが、それがわかりません。ぜひご覧ください。どこが間違っているのかわかりましたら、お知らせください。

編集: これは d3.js バージョン 7.4.4

を使用していることに注意してください。 リーリー

興味深いことに、軸の外側の点が表示されないようにクリッピング領域を設定した後、問題は自動的に解決されたようです。クリッピング パスの作成方法は次のとおりです:

リーリー

次に、次のようにデータをプロットするときに、その属性を SVG に追加します。 リーリー

描画データ セクションを使用したクリッピング パスの更新:

ああああ

Answer 1

やっと問題が解決しました。私にとって何がうまくいったかを示すために元の投稿を更新しました。

基本的に、クリッピング領域を追加すると、すべてが正しく動作し始めました。

リーリー