Javascript 如何向地图添加控件和按钮？

这可能是一个非常基本的问题，但我想不出来。我正在用D3绘制地图。我的代码创建svg和svg，在其中附加一个g元素，然后在其中绘制地图。我想要的是渲染一组位于地图查看器中的按钮和控件。它们是缩放按钮、显示不同数据集的下拉菜单和时间轴滑块

例如，使用我想要放置的下拉选择器，我执行了以下操作：

我尝试使用d3，如中所示：

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

但这使得选择项和选项项彼此分离，甚至在地图容器中不可见

如前所述，我不仅想添加下拉列表，还想添加缩放按钮和滑块等项目。如何在贴图容器中渲染和定位它们

---

感谢

这已经被问了好几次了（肯定是重复的）：您不能将HTML元素（“div”、“p”、“select”、“h1”等）附加到SVG。这根本行不通

最好的解决方案是在HTML中创建下拉菜单和SVG之外的其他控件

但是，如果您真的想在SVG中创建这个下拉列表（我不建议这样做），您可以使用

foreignObject

（这在IE上不起作用）：

---

这已经被问了好几次（肯定是重复的）：您不能将HTML元素（“div”、“p”、“select”、“h1”等）附加到SVG。这根本行不通

最好的解决方案是在HTML中创建下拉菜单和SVG之外的其他控件

但是，如果您真的想在SVG中创建这个下拉列表（我不建议这样做），您可以使用

foreignObject

（这在IE上不起作用）：

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