Get

Question

I have existing <svg> and want to include venn diagram into this element. Here is structure of my elements:

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

How can I get <svg> element, which was created by venn library?

Full code:

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>

And I want to get this <svg> element:

_{Thanks to library author for answer in this issue}

`d3.select("#venn>svg")` or `d3.select("#venn").select("svg")`. — altocumulus, Apr 10 '18 at 23:18

diralik · Accepted Answer · 2018-04-10T23:38:06.337

You should on your own create child <svg> element, which venn.js would use:

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

Live demo:

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

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

1 Answers1

Get