d3维恩图标签分层

Question

我正在使用这篇伟大的文章用D3制作维恩图。

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

它看起来很棒但有时我会让标签上的气泡重叠而变得隐藏起来。有没有办法确保文本元素始终位于顶部？ （见下图。标签A需要位于圆圈B的顶部。

我找到了这篇好文章，但我正在努力如何在维恩实现这一点。

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

Answer 1

您可能会发现在实际图层中工作更容易。您可以使用g元素来创建它们。例如：

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

现在，您附加到upperLayer的任何内容都会显示在您附加到lowerLayer的任何内容之上，因为这两个g元素已添加到DOM并按特定顺序排列。

同时查看this answer我写了一个类似的问题。

Answer 2

您应该从master获取最新代码：此提交应解决您遇到的问题https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf

而不是拥有＆＃39; A＆＃39;标签超出了＆＃39; B＆＃39;圆圈 - 它将移动标签，使其在某个“A＆＃39;与＆＃39; B＆＃39;重叠的区域。此处有一些详细信息：https://github.com/benfred/venn.js/issues/18