获取由 venn.js 创建的 <svg> 元素，当它位于现有 <svg> 元素内时

Question

我有现有的 <svg> 并且想要将维恩图包含到此元素中。这是我的元素的结构：

<svg id="main-svg">
  ... some elements, for example <g> or <svg> ...
  <svg> // this is Venn.js root element
    <g class="venn-area venn-circle" data-venn-sets="0">...</g>
    ...
  </svg>
</svg>

如何获取由 venn 库创建的 <svg> 元素？

完整代码：

const sets = [
  { sets: ['A'], size: 12 },
  { sets: ['B'], size: 12 },
  { sets: ['A', 'B'], size: 2 },
];

const chart = venn.VennDiagram();
d3.select('#main-svg').datum(sets).call(chart);

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://rawgit.com/benfred/venn.js/master/venn.js"></script>

<svg width="800" height="800" id="main-svg"></svg>

我想得到这个 <svg> 元素：

_{感谢库作者在 this issue}

中的回答

Answer 1

您应该自己创建子 <svg> 元素，venn.js 将使用：

<svg id="main-svg">
  <svg id="inner_svg_which_would_be_used_by_venn"></svg>
</div>

现场演示：

const sets = [
  { sets: ['A'], size: 12 },
  { sets: ['B'], size: 12 },
  { sets: ['A', 'B'], size: 2 },
];

const chart = venn.VennDiagram();
d3.select('#main-svg').datum(sets).call(chart);
const rootSvg = d3.select('#inner_svg_which_would_be_used_by_venn');
// use rootSvg somehow

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://rawgit.com/benfred/venn.js/master/venn.js"></script>

<svg id="main-svg" height="800" width="600">
  <svg id="inner_svg_which_would_be_used_by_venn"></svg>
</svg>

Live demo on bl.ocks.org

获取由 venn.js 创建的 <svg> 元素，当它位于现有 <svg> 元素内时

Get <svg> element created by venn.js, when it is inside existing <svg> element

javascript

d3.js

venn.js