d3 维恩图标签分层

Question

我正在使用这篇很棒的文章使用 D3 生成维恩图。

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

它看起来很棒，但有时我会看到与标签重叠的气泡被隐藏了。有没有办法确保文本元素始终位于顶部？ （见下图。标签 A 必须位于圆圈 B 的顶部。

我找到了这篇好文章，但我正在苦苦思索如何在 venn 中实现它。

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

Answer 1

你应该从大师那里获取最新的代码：这个提交应该解决你在https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf那里遇到的问题

不是让“A”标签位于“B”圆圈上方 - 它现在将移动标签，使其位于不与“B”重叠的“A”区域中。这个问题的一些细节在这里：https://github.com/benfred/venn.js/issues/18

Answer 2

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

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

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

还可以查看this answer 我写了一个类似的问题。