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;。