Estoy tratando de colocar una lista desplegable (con select
y option
) dentro de un div
y un SVG usando d3.js, pero no funciona y el select
no se ve. No sé si son las propiedades o el motivo por el que ocurre. ¿Cómo puedo hacerlo?
Éste es el código que estoy usando:
Nota: el código proviene de una pregunta que fue anteriormente borrada y también está disponible en este JSFiddle.
var data = [
{"id":1,"text":"LAND1"},
{"id":2,"text":"LAND2"},
{"id":1,"text":"LAND3"}
];
var vis = d3.select(".dashboard")
.select("#sowing")
.append("div")
.append("svg")
.attr("id", "chartID")
.attr("class", "boxing")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 540 250")
.append("g")
.attr("transform", "translate(" + 550 / 2 + "," + 300 / 2 + ")");
var select = vis.append('select')
.attr("name", "dept-list")
.attr("class", "form-control");
var options = select.selectAll('option')
.data(data)
.enter()
.append('option')
.text(function(d) {
return d.text;
})
.attr("value", function(d) {
return d.id;
});
#chartID {
border: 1px solid #D4D4D4;
background-color: #FFFFFF;
border-radius: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<section class="content">
<div class="col-lg-12">
<div class="dashboard">
<div id="sowing"></div>
</div>
</div>
</section>