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

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

Solution 1:^[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dan

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]