Wie können Sie Steuerelemente und Schaltflächen hinzufügen?

Question

Dies ist wahrscheinlich eine wirklich grundlegende Frage, aber ich kann es nicht herausfinden. Ich baue eine Karte mit D3. Mein Code erstellt und svg, fügt ein g-Element hinzu und zeichnet dann die Karte darin. Ich möchte eine Reihe von Schaltflächen und Steuerelementen rendern, die im Map Viewer positioniert sind. Sie wären Zoom-Schaltflächen, ein Dropdown-Menü, um verschiedene Datenmengen anzuzeigen, und ein Zeitachsen-Schieberegler.

Zum Beispiel mit dem Drop-Down-Wähler mag ich lege ich dies tue:

Ich habe versucht, d3, wie in:

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 
    }); 

aber die gerenderte die Artikel auswählen und Optionselemente voneinander zu trennen, und nicht einmal innerhalb des Kartencontainers sichtbar.

Wie bereits erwähnt, nicht nur tun möchte ich ein Dropdown hinzufügen, aber auch Tasten für Zoom und einen Schieber, unter anderem. Wie rende und positioniere ich sie im Kartencontainer?

Dank

Answer 1

Dies wurde mehrmals gefragt (sicher ein Duplikat): Sie nicht append HTML-Elemente ("div", "p", "wählen", "h1" usw.) zu einem SVG. Es wird einfach nicht funktionieren.

Die beste Lösung, in Ihrem Fall, wird die Dropdown-Menü erstellen und die anderen Kontrollen außerhalb des SVG, in der HTML.

Aber, wenn Sie wirklich wollen, diese Dropdown innerhalb des SVG erstellen (was ich rate nicht), können Sie foreignObject (die nicht auf IE funktionieren):

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