Drop down menu over d3 SVG

Question

I'm stuck. I want to add an html drop down menu over an SVG chart that I've created using d3. Currently the drop-down menu appears below the chart, but I want the drop-down menu to appear over a specific location on the chart.

I'm unclear if my problem is with the order in which browser renders all of the elements or if it's simply an CSS issue.

Any help would be appreciated.

Here's my html:

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

Here's my css:

  .chartArea{
      position: relative;}

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

Here's where I create the SVG element in d3:

  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");

I later populate the selection box with options in d3

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

Answer 1

I don't see any mistake in the scripts you have provided.

I tried to recreate the scenario with the inputs you have provided but not able to recreate however I am putting my working code.

This might help you.

 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

Try adding z-index: 10; in the CSS for your demoSelection class.