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

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