マップにコントロールとボタンを追加するにはどうすればよいですか？

Question

これはおそらく本当に基本的な質問ですが、わかりません。私はD3を使用して地図を作成しています。私のコードが作成し、svg、それにg要素を追加し、その中にマップを描画します。私が望むのは、マップビューア内に配置された一連のボタンとコントロールをレンダリングすることです。ズームボタン、異なるデータセットを表示するためのドロップダウン、タイムラインスライダーなどがあります。 、

svg.append("select") 
    .attr("class", "field_dropdown") 
    .data(['housing_unit', 'tenure', 'median_contract_rent', 'median_value', 'median_income']) 
    .enter() 
    .append("option") 
    .attr("value", function(d) { 
     return d 
    }); 

をこれは、選択項目と選択項目が互いに分離レンダリング：私のようにD3を用いて試み

：

例えば、ドロップダウン・セレクタと、私はこれをした配置たいマップコンテナ内には表示されません。

前述のように、ドロップダウンを追加するだけでなく、ズームやスライダーなどのボタンも追加する必要があります。地図コンテナでレンダリングして配置するにはどうすればよいですか？

おかげ

Answer 1

はこれを数回（確か重複を）頼まれました：あなたはできないアペンドHTML要素（ "DIV"、 "P"、 "選択"、 "H1" など）SVGに。それは単に動作しません。

あなたの場合、最善の解決策は、ドロップダウンメニューとSVG外の他のコントロールをHTMLで作成することです。

しかし、あなたは本当に（私はお勧めしません）SVG内のこのドロップダウン、あなたは（IE上では動作しません）foreignObjectを使用することができます作成​​する場合：

var foreign = svg.append("foreignObject") 
    .attr("width", 100) 
    .attr("height", 100) 
    .append("xhtml:body"); 

var select = foreign.append('select') 
    .attr("class", "field_dropdown") 
    //the rest of your code 

を