Javascript d3 SVG上的下拉菜单

我卡住了。我想在使用d3创建的SVG图表上添加一个html下拉菜单。当前，下拉菜单显示在图表下方，但我希望下拉菜单显示在图表上的特定位置上

我不清楚我的问题是浏览器呈现所有元素的顺序，还是仅仅是CSS问题

任何帮助都将不胜感激

这是我的html：

<div class="chartArea">
  <select class = "demoSelection"></select></div>

这里是我在d3中创建SVG元素的地方：

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

我随后用d3中的选项填充选择框

  d3.select(".demoSelection")
       .append("option")
       .attr("value",demoCounter)
       .text(json.demos[demoCounter].title);

---

尝试添加

z-index:10。
我没有看到您提供的脚本中有任何错误

我试图用您提供的输入重新创建场景，但无法重新创建，但我正在使用我的工作代码

这可能对你有帮助


var svg=d3.选择（“主体”）.选择（“图表区域”）
.append（“svg”）
.attr（“id”、“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
.附加（“g”）.attr（“类别”、“图表”）；
var数据=[4,8,15,16,23,42]；
var宽度=420，
杆高=20；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0，宽度]）；
var bar=svg.selectAll（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，x）
.attr（“高度”，酒吧高度-1）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{return d；}）；
d3.选择（“demoSelection”）
.附加（“期权”）
.attr（“值”，1）
.text（“你好”）；
d3.选择（“demoSelection”）
.附加（“期权”）
.attr（“值”，2）
.text（“另一声你好”）
.chartArea{
位置：相对位置；
}
.人口选择{
位置：绝对位置；
宽度：100px；
顶部：40px；
左：25px；
}
.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}

没有变化。主要问题是下拉列表出现在图表下方，而不是顶部。如果它出现在图表顶部，但不可见，z索引可能会起作用。谢谢你的代码！这证明了这是可能的，我的代码出了问题。在将您的css元素样式与我自己在chrome中的样式进行比较后，我发现我的.css类没有被正确地选取。原来我在SASS中有一个嵌套问题。谢谢！
  d3.select(".demoSelection")
       .append("option")
       .attr("value",demoCounter)
       .text(json.demos[demoCounter].title);