D3 - 如何通过函数将 SVG 放入 DIV？

Question

为了重用代码，我想将我的 SVG 放入一个函数中并根据需要调用它。一旦我 select DIV 在其中呈现 SVG 的适当结构是什么？

...

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()) 应该可以解决问题。这是一个例子：

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

或者，您可以将 Pill 函数传递给您要将其添加到的 div 选择。

D3 - 如何通过函数将 SVG 放入 DIV？

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

javascript

d3.js

observablehq