javascript - 如何使用 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 元素(如您的选择/选项输入)使用 CSS 样式定位——通常是通过分配一个“类”(如果您想以相同的方式设置多个元素的样式)，或通过“id”(必须是唯一的)在您的 html 文档中)。

因此，“定位”您的选择列表的最简单方法是在 <style> 中包含这样的指令。您页面的部分:

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

不太可取的是只在 select 上包含那些 CSS 指令。元素本身，使用 d3 style(name, value)功能:

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

通常，尝试对 html 元素进行像素定位是一种令人沮丧的练习——对于您和您的使用不同分辨率屏幕和设备的用户而言。但是，如果您需要为您的元素提供一些边距或对齐方式，有许多 css 指令可以帮助您使其看起来像您想要的那样。

IMO，尝试不同样式的最简单方法是使用 F12打开浏览器的开发控制台——当您在页面上找到该元素时，使用右侧的样式列表以交互方式调整它...