0

Im using this great article to produce a venn diagram with D3.

http://www.benfrederickson.com/venn-diagrams-with-d3.js/

It looks great but on occasion I get bubbles overlapping the the labels become hidden. Is there a way to make sure the text element is always on top? (see the picture below.. label A needs to be on top of circle B.

I found this good article but im struggling in how to implement this in the venn.

How can I bring a circle to the front with d3?

layering issue with venn labels

Community
  • 1
  • 1
Cookiejest
  • 653
  • 6
  • 17

2 Answers2

1

You might find it easier to work in actual layers. You can use g elements to create them. For example:

var lowerLayer = svg.append('g');
var upperLayer = svg.append('g');

Now anything you append to upperLayer will appear above anything you append to lowerLayer because the two g elements have been added to the DOM and are in a specific order.

Also check out this answer I wrote up for a similar question.

Community
  • 1
  • 1
jshanley
  • 9,048
  • 2
  • 37
  • 44
1

You should grab the latest code from master: this commit should fix the issue you had there https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf

Instead of having the 'A' label be overtop of the 'B' circle - it willnow move the label so that its in the certain of the 'A' region that isn't overlapped with 'B'. Some details are in this issue here: https://github.com/benfred/venn.js/issues/18

Ben Frederickson
  • 161
  • 5