1

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>

1 respuesta 1

2

El problema está al hacer esto:

var vis = d3.select(".dashboard")
            .select("#sowing")
            .append("div")
            .append("svg")
            ....

La variable vis no contiene un div sino un svg que es el último elemento que se añadió. Entonces el select se está poniendo dentro de un svg y no se muestra, porque los elementos HTML no son propios de SVG, entonces se ignoran y no se muestran (aunque si miras el código, verás que sí están ahí).

Una posibilidad sería mover el select a fuera del svg y posicionarlo de manera absoluta donde quieras. Entonces ya podrías colocarlo encima del SVG y se vería bien (aunque técnicamente no estará dentro del SVG).

Otra alternativa sería utilizar foreignObject. En SVG puedes colocar código no propio de SVG (por ejemplo HTML) dentro de un SVG usando foreignObject (que se traduce literalmente como objeto foráneo o extraño) y se ejecutará de la manera apropiada. Entonces tendrías que poner el select dentro de un foreignObject en el SVG para que entonces sí se interprete.

Sólo tendrías que cambiar estas líneas de código (el resto se mantendría igual):

// primero coloca un foreignObject
var fo = vis.append("foreignObject")
            .attr("width", 100)
            .attr("height", 100);

// y luego el select dentro del foreign object
var select = fo.append('xhtml:select')
               .attr("name", "dept-list")
               .attr("class", "form-control");

Nota que es muy importante que el foreignObject tenga un ancho y alto (mínimo de 1) o su contenido no se mostrará. Además, nota como le he puesto el prefijo xhtml: al select para que se interprete correctamente (de lo contrario no se vería).


El resultado completo se vería así:

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 fo = vis.append("foreignObject")
            .attr("width", 1)
            .attr("height", 1);
          
var select = fo.append('xhtml: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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.