<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js" integrity="sha512-T+1zstV6Llwh/zH+uoc1rJ7Y8tf9N+DiC0T3aL0+0blupn5NkBT52Avsa0l+XBnftn/14EtxpsztAWsmiAaqfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var data = { "Domains": [ "Domain 1", "Domain 2", "Domain 3" ] }; d3.selectAll('#domains ul li') .data(data.Domains) .join("li") .text(function(d) { return d; }); </script> </head> <body> <h2>Domains</h2> <div id="domains"><ul></ul></div> </body> Aquí está mi código muy simple. Espero que cree elementos <li> dentro del elemento <ul> , uno para cada Dominio. ¡Pero los crea entre la cabeza y el cuerpo! El html resultante (obtenido del inspector de Chrome) es:
<html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js" integrity="sha512-T+1zstV6Llwh/zH+uoc1rJ7Y8tf9N+DiC0T3aL0+0blupn5NkBT52Avsa0l+XBnftn/14EtxpsztAWsmiAaqfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var data = { "Domains": [ "Domain 1", "Domain 2", "Domain 3" ] }; d3.selectAll('#domains ul li') .data(data.Domains) .join("li") .text(function(d) { return d; }); </script> </head><li>Domain 1</li><li>Domain 2</li><li>Domain 3</li> <body> <h2>Domains</h2> <div id="domains"><ul></ul></div> </body></html>Claramente estoy haciendo algo estúpido, ¿alguien puede señalar qué es?
Luego modifiqué mi script de la siguiente manera:
<script> var data = { "Domains": [ "Domain 1", "Domain 2", "Domain 3" ] }; d3.select('#domains ul') .selectAll('li') .data(data.Domains) .join("li") .text(function(d) { return d; }); </script> En este caso, no se agrega ningún elemento <li> en ninguna parte y ni siquiera se llama a la función de texto.
¿Ayuda?
Lo que seleccione con d3.selectAll no influye en dónde se inserta un elemento en el DOM. Lo que quieres usar es selection.selectAll
Une e ingresa elementos adjuntos a un padre: no ha especificado un padre, por lo que los elementos simplemente se ingresan en la página, ya que el padre es el documento en sí mismo de forma predeterminada si usa d3.selectAll .
En su lugar, seleccione su elemento principal, el ul y luego, usando esa selección, haga la unión: esto significa que cualquier elemento ingresado se agregará al elemento principal que seleccionamos, el ul :
d3.select("#domains ul") // return a selection of a parent element .selectAll("li") // select children we have or want to have .data(data.Domains) .join("li") // enter/update/exit children li elements ...A menudo, verá patrones en los que la selección del padre se guarda con una variable.
Pero tenemos un problema más, su código está en el encabezado del documento, se ejecuta antes de que se cargue el resto del documento, por lo que no podrá seleccionar ul . Si coloca el script al final del cuerpo, lo evitará o, alternativamente, puede usar el método document.ready. Esta es también la razón por la que sus elementos li se agregan entre la cabeza y el cuerpo: append agrega cosas como el último elemento secundario, pero estos elementos no se pueden agregar después del cuerpo ya que el cuerpo aún no se ha cargado.
Aquí hay un ejemplo de trabajo:
var data = { "Domains": [ "Domain 1", "Domain 2", "Domain 3" ] }; let ul = d3.select("#domains ul"); ul.selectAll("li") .data(data.Domains) .join("li") .text(function(d) { return d; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script> <h2>Domains</h2> <div id="domains"><ul></ul></div>