javascript - D3、Google マップ、d3 要素の選択

Question

この例では、マーカー選択を追加しようとしています (つまり、マーカー変数に .on("click"...) を追加します)。ただし、マウスを Google マップのキャンバスに合わせると、ドラッグできる手が表示され、それを使用して svg 要素を選択することはできません。

D3 要素をクリックできるように、その機能を (一時的に) 無効にする方法はありますか?

Answer 1

現在、このような地図を作成中です。Google のマーカー (むしろ d3 SVG 円) は使用していませんが、マップの overlayMouseTarget レイヤー内のオブジェクトにマウスオーバー/クリック/その他のイベントが必要であることがわかりました。

var overlay = new google.maps.OverlayView();

overlay.onAdd = function() {

    var layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "providers");
             ...
}

d3js.org の gMaps デモでは、別のレイヤーが使用されていると思います。

Answer 2

var overlay = new google.maps.OverlayView(); を使用できます。overlay.onAdd 関数

 overlay.onAdd = function () {
    var layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "stations");
   }

カスタム マーカーを描画するにはoverlay.draw

オーバーレイをoverlay.setMap()マップにバインドするには…</p>

詳細については、https://developers.google.com/maps/documentation/javascript/overlaysをご覧ください。