如何添加控件和按鈕來映射？

這可能是一個非常基本的問題，但我無法弄清楚。我正在使用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

如何添加控件和按鈕來映射？

回答

相關問題