javascript - 如何添加控件和按钮映射？

Question

这可能是一个非常基本的问题，但我想不通。我正在使用 D3 构建 map 。我的代码创建和 svg，向其附加一个 g 元素，然后在其中绘制 map 。我想要的是呈现一组位于 map 查看器内的按钮和控件。它们将是缩放按钮、显示不同数据集的下拉菜单和时间轴 slider 。

例如，对于我想要放置的下拉选择器，我是这样做的:

我尝试使用 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
   });

但这使得选择项和选项项相互分离，甚至在 map 容器中不可见。

如前所述，我不仅要添加下拉菜单，还要添加缩放按钮和 slider 等。如何在 map 容器中渲染和定位它们？

谢谢

Answer 1

这已被问过好几次(肯定是重复的):您不能将 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