Estaba trabajando con el siguiente tutorial de D3.js: https://www.tutorialspoint.com/d3js/index.htm .
Mi problema es el siguiente:
<body> <!-- HTML code --> <script> <!-- JS code or external JS link --> </script> </body>Con esta práctica, lo que busco es ejecutar JS después de que se muestre el contenido HTML.
¡Pero! Cuando sigo esta práctica usando D3.js, lo que descubro es que D3.js representa lo que agrego (usando d3("html").append(algo para agregar), después de las etiquetas del script.
¡Por ejemplo!
<!DOCTYPE html> <head> <title>D3.js Test</title> </head> <body> <div class="div_test"> <h1>I want the D3.js content after this div (but not inside the div)</h1> </div> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <script> d3.select("html").append("p").text("I get this text after the script tags"); </script> </body> </html>Obtengo el contenido de la siguiente manera:
<!DOCTYPE html> <html> <head> <title>D3.js Test</title> </head> <body> <div class="div_test"> <h1>I want the D3.js content after this div (but not inside the div)</h1> </div> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <script> d3.select("html").append("p").text("I get this text after the script tags"); </script>` </body><p>I get this text after the script tags</p></html>¡Preguntas!
¡¡¡Gracias!!!
Puede usar selection.insert() para insertar un elemento en lugar de agregarlo al DOM. El segundo argumento de ese método determina dónde se coloca el elemento recién creado en el árbol DOM. Si solo desea colocarlo delante del primer elemento <script> , puede hacer algo como:
d3.select("body").insert("p", "script") // <-- insert before first <script> Si necesita colocarlo después de <div> , sin importar cómo se vea el siguiente elemento, puede usar el combinador de hermanos adyacente para seleccionar el elemento hermano directamente después de <div> así:
d3.select("body").insert("p", "div + *") // <-- insert before next element following div