次のようにGoogle散布図を生成しました。
<g>
<circle cx="393.66499999999996" cy="142.17399999999998" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="362.655" cy="80.21199999999999" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="211.29666666666665" cy="142.726" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="427.62833333333333" cy="65.03199999999998" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="423.93666666666667" cy="114.712" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="169.95" cy="114.80399999999999" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="418.03" cy="114.38999999999999" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
<circle cx="356.74833333333333" cy="67.05599999999998" r="4.5" stroke="none" stroke-width="0" fill="#f2f2f2"></circle>
</g>
円の 1 つがクリックされたときにドロップダウンまたはポップオーバーをトリガーする必要があり、円が SVG 内にある正確な位置に表示する必要があります。
Google がチャートで使用できるようにしている選択ハンドラー ( https://developers.google.com/chart/interactive/docs/events#Event_Listeners ) をリッスンできることはわかっていますが、JS をバインドする方法がわかりません。特定の円をクリックしても、その時点でドロップダウン/ポップオーバーが表示されません。