如何使用D3.js設置下拉列表的位置？

Question

我想使用D3.js設置下拉列表的位置，但與其他元素不同，select元素沒有x和y屬性，因此我不知道該怎么做。

d3.select("#chart")
             .append("select")
             .attr("id","desplegable")
             .on('change',onchange)
             .selectAll("option")
             .data(preguntas)
             .enter()
             .append("option")
             .attr("value", function(d){return d;})
             .text(function(d){return d;})
          ;

此外，我嘗試將下拉列表插入到svg中，但是它不起作用。

var svg = d3.select("#chart").append("svg")
            .attr("id","svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")"); 


   svg.append("select")
             .attr("id","desplegable")
             .on('change',onchange)
             .selectAll("option")
             .data(preguntas)
             .enter()
             .append("option")
             .attr("value", function(d){return d;})
             .text(function(d){return d;})
      ;

先感謝您。

Answer 1

HTML元素（如您的select / options輸入）使用CSS樣式進行定位-通常通過分配“類”（如果您希望以相同的方式設置多個元素的樣式）或“ id”（在html中必須唯一）文獻）。

因此，“定位”選擇列表的最簡單方法是在頁面的<style>部分中包含如下指令：

<style>
    #desplegable {
        left: 10px;
        top: 5px;
    }
</style>

不太可取的是使用d3 style(name, value)函數將這些CSS指令僅包含在select元素本身上：

svg.append("select")
   .attr("id","desplegable")
   .style("left", "10px")
   .style("top", "5px")
   ... etc ...

通常，嘗試對html元素進行像素定位是一項令人沮喪的練習-對於您和使用不同分辨率屏幕和設備的用戶而言。 但是，如果您需要給元素一些邊距或對齊方式，那么有很多css指令可以幫助您以所需的方式查找它。

IMO，嘗試不同樣式的最簡單方法是使用F12打開瀏覽器的開發者控制台-當您在頁面上找到元素時，請使用右側的樣式列表進行交互式調整...