d3 SVG 上的下拉菜单

Question

我被困住了。我想在我使用 d3 创建的 SVG 图表上添加一个 html 下拉菜单。目前下拉菜单出现在图表下方，但我希望下拉菜单出现在图表上的特定位置。

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

任何帮助将不胜感激。

这是我的html：

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

这是我的 CSS：

  .chartArea{
      position: relative;}

    .demoSelection {
      position: absolute;
      width: 250px;
      top:400px;
      left:250px;}

这是我在 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);

Answer 1

我没有发现您提供的脚本有任何错误。

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

这可能会对你有所帮助。

var svg = d3.select("body").select(".chartArea")
    .append("svg")
    .attr("id", "svg")
    .attr("width", 500)
    .attr("height", 500)
    .append("g").attr("class", "chart");

var data = [4, 8, 15, 16, 23, 42];

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);



var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

d3.select(".demoSelection")
    .append("option")
    .attr("value", 1)
    .text("Hello");
d3.select(".demoSelection")
    .append("option")
    .attr("value", 2)
    .text("Another Hello");

.chartArea {
    position: relative;
}
.demoSelection {
    position: absolute;
    width: 100px;
    top:40px;
    left:25px;
}
.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chartArea">
    <select class="demoSelection"></select>
</div>

Answer 2

尝试在您的 demoSelection 类的 CSS 中添加 z-index: 10;。