React + d3 - 私の <g> 要素が onClick リスナーに応答しないのはなぜですか

Question

私は d3 をあまり使用したことがありませんが、React と d3 の間にいくつかの競合がある可能性があることは承知しています。これもその一つかもしれません。

d3 のスケーラブルな動作を実装する svg があります。 SVG内の要素をドラッグ可能にしたいです。最初の試みは、コンソールに何かを記録するために onClick リスナーを配置することでしたが、うまくいきませんでした。ここで何が足りないのか説明してもらえますか？ d3 のスケーリング動作がクリック イベントをハイジャックしているのではないかと思います。ありがとう。 コードは次のとおりです:

ズーム機能付きグリッド。

リーリー

長方形コンポーネント。 g要素とrect要素を試してみました。無職。

ああああ

Answer 1

コードでは、Rect コンポーネントがレンダリングされた後に useEffect フックがトリガーされます。つまり、useEffect のパターンと関連する背景の四角形が Rect コンポーネントの上にレンダリングされます。その後、イベントが基礎となる長方形コンポーネントに伝播するのを防ぎます。

この問題を解決するには、2 つのオプションがあります。 1 つ目はモードの「pointer-events」プロパティと関連するものを「none」に設定すること、2 つ目はこれらを一番下に置くことです。これはライブデモンストレーションです。 Int スクリーンショット デモリンク

リーリー