Acabo de perder toda la mañana en lo que debería haber sido una tarea muy básica y directa. Lo siento si la solución a este problema es obvia para usted, estoy comenzando con D3.js y Javascript.
Estoy buscando cargar, en D3, un archivo svg externo y tenerlo como un svg en línea para realizar más operaciones, no como una imagen estática, y trabajando en archivos locales. No entiendo cómo no puede haber una manera de hacer algo tan simple y básico. He intentado todo lo que pude:
<!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v6.min.js"></script> </head> <body> <script> d3.xml('nameOfMysvgFile.svg') .then(data => { document.body.append(data.documentElement) }) </script> </body> </html> Hasta ahora, lo mejor que logré fue cargar mi svg como un objeto (como se hace aquí: http://dahlström.net/svg/html/get-embedded-svg-document-script.html ), y luego estoy atascado , ya que no puedo hacer ninguna operación en Javascript en ese objeto. ¿Cómo transferir el contenido del objeto a svg en línea? O como sacar ese "envoltorio" de #documento que impide hacer nada en el svg? O incluso mejor, agregar el contenido a un contenedor svg existente ( mySvgContainer.append("g").[magic command to add the contents of external svg file] )?