Para reutilizar el código, quiero poner mi SVG en una función y llamarlo según sea necesario. Una vez que selecciono el DIV, ¿cuál es la construcción adecuada para representar el SVG dentro de él?
... if (intLocations.includes(comm.location)) { const intActivities = d3.select('div#intActivities') intActivities.append(Pill(comm)) } else { const extActivities = d3.select('div#extActivities') actActivities.append(Pill(comm)) } ... function Pill(comm) { const svgNode = d3.create('svg') svgNode .attr('width', 100) .attr('height', 100) .append('g') // More code to draw the figure using comm data. return svgNode; }intActivities.append(() => Pill(comm).node()) debería funcionar. Aquí hay un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://d3js.org/d3.v7.js"></script> </head> <body> <div id="my-div"></div> <script> d3.select('#my-div').append(() => square().node()); function square() { const svg = d3.create('svg') .attr('width', 100) .attr('height', 100); svg.append('rect') .attr('width', 100) .attr('height', 100) .attr('fill', 'navy'); return svg; } </script> </body> </html> Alternativamente, puede pasar a su función Pill la selección div a la que desea agregarla.