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

这可能是一个非常基本的问题，但我无法弄清楚。我正在使用D3构建地图。我的代码创建和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 
    });

但这呈现的选择项目和可选项目彼此分开，甚至在地图容器中都不可见。

如上所述，我不仅要添加下拉菜单，还要添加缩放按钮和滑块等按钮。我如何在地图容器中渲染和放置它们？

感谢

来源

2016-12-05 user2030942

这已经被问了几次（当然一式两份）：你不能追加HTML元素（ “格”， “P”， “选择”， “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

来源

2016-12-05 05:03:44

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

回答

相关问题