Get root <svg> element
Closed this issue · 6 comments
Could you say, please, how can I in JavaScript get root <svg> element, which is added by Venn.js?
This example adds a 'defs' section to the svg (to add a drop shadow): https://github.com/benfred/venn.js/blob/master/examples/styled.html#L103
Thank you, if I understand correctly you propose use d3.select("#main_div_id svg").
I am having a bit different situation, I am trying to include Venn.js diagram into existing svg. So my svg structure looks like this:
<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>
Maybe I should use :nth-child() and so on, but can you say, please, maybe there is a better solution.
If you pass a valid SVG element to the venn diagram, it will use it instead of creating a new one.
I feel like something like this will do what you want:
<html>
<body>
<div><svg width=800 height=800><svg id="venn"></svg></svg></div>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../venn.js"></script>
<script>
// define sets and set set intersections
var sets = [ {sets: ['A'], size: 12},
{sets: ['B'], size: 12},
{sets: ['A','B'], size: 2}];
var chart = venn.VennDiagram();
d3.select("#venn").datum(sets).call(chart);
</script>
</html> You'll have to be careful with the width/height to get this to work, and you might need a svg transform to move the venn diagram to the correct location - but I think this should work
Thank you for response!
If you pass a valid SVG element to the venn diagram, it will use it instead of creating a new one.
So I just copy your example to create this gist and looks like new <svg> element still creates:
Could you say, please, what I miss?
You didn't miss anything - I gave you bad information (didn't test too closely =(. The element here d3.select("#venn") is always the parent of the svg, not the the svg itself.
However, using the same javascript and updating the html to:
<body>
<svg width=800 height=800><g id="venn"><svg id="for_real_this_time"></svg></g></svg></div>
</body>
And venn.js won't create a new SVG element, and just use the one thats already created as the child of the d3.select("#venn") call:
Yes, thank you!
I am summarize this as StackOverflow answer