문제 설명
d3 SVG의 드롭다운 메뉴 (Drop down menu over d3 SVG)
막혔어요. 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);
참조 솔루션
방법 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>방법 2:
Try adding z‑index: 10; in the CSS for your demoSelection class.
(by AmericanCities、Cyril Cherian、Captain Nova)
_D3/SVG: 범위를 수정하여 시간 척도로 d3.svg.axis의 크기를 조정하는 방법은 무엇입니까? (D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?)){kind=link}
_snap.svg에서 그룹의 요소/자식을 반복하는 방법은 무엇입니까? (How to iterate on a group's elements/children in snap.svg?)){kind=link}