D3 - How can I put an SVG into a DIV via a function?

Question

To reuse code I want to put my SVG into a function and call it as needed. Once I select the DIV what is the appropriate construct to render the SVG inside it?

...

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;
   }

Answer 1

intActivities.append(() => Pill(comm).node()) should do the trick. Here's an example:

 <: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>

Alternatively, you could pass your Pill function the div selection that you want to add it to.

D3 - How can I put an SVG into a DIV via a function?

Question

1 answers

solution1
1 ACCPTED 2022-03-11 16:52:52

D3 - How can I put an SVG into a DIV via a function?

Question

1 answers

solution1 1 ACCPTED 2022-03-11 16:52:52

solution1
1 ACCPTED 2022-03-11 16:52:52