D3 DataMapsを使用してSVGアイテムを選択していますか？

Question

D3のData Mapsライブラリを見ています.SVGコンテンツを操作する方法を知りたいと思います。基本的な世界地図を見て、カナダをクリックしてalert("Selected")をどのように実行するのですか？または、背景色をクリックして変更しますか？

編集：私の具体的な例では、私は米国の地図を使用しています。 usa.jsに、私は、このような「NY」などのIDを見つけ、今

var map = new Datamap({element: document.getElementById('maincontains'), 
scope: 'usa', 
fills: {defaultFill: 'rgb(217, 217, 217)'} 
}); 

：私は、マップを起動するために以下の行を使用します。しかし、これはイベントに

document.getElementById("NY").addEventListener('click', function(){ alert("New York");}

Answer 1

documentationに私を許可していません、次の言葉：

すべてのイベントは、ルートSVG要素にバブルアップされていると イベントに耳を傾け、 doneコールバックを使用します。

<script> 
    var map = new Datamap({ 
     element: document.getElementById('container'), 
     done: function(datamap) { 
      datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { 
       alert(geography.properties.name); 
      }); 
     } 
    }); 
</script> 

私の例では、グリーンランドをクリックしてください：

だからクリックイベントをバインドし、名前を警告するために、mapオブジェクトのdoneイベントを使用してイベントハンドラ内svgオブジェクトを使用します：

さらにrestri例：特定の国のみ）をプロパティを使用して作成することができます。