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

Question

私は d3 を初めて使用するため、React と d3 の間にいくつかの競合がある可能性があることを知っています。これもその一つかもしれません。 d3 のスケーラブルな動作を実装する svg があります。 SVG内の要素をドラッグ可能にしたい。最初の試みは、コンソールに何かを記録するために onClick リスナーを配置することでしたが、うまくいきませんでした。ここで何が足りないのか説明してもらえますか？ d3 のスケーリング動作がクリック イベントをハイジャックしているのではないかと思います。ありがとう。コードは次のとおりです: ズーム機能を備えたグリッド。 importReact、{useState、useEffect、

P粉773659687 · Answer

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

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

リーリー