d3維恩圖標籤分層

Question

我使用這個偉大的文章與D3產生維恩圖。

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

它看起來不錯，但有時我得到的氣泡重疊的標籤被隱藏。有沒有辦法確保文本元素始終位於頂部？ （見下面的圖片..標籤一個需要放在圓圈B的頂部

我發現這個好文章，但即時通訊在如何實現這種在維恩掙扎。

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

Answer 1

你應該抓住從掌握最新的代碼：這個承諾應該可以解決你必須有https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf

而不是由「A」的標籤是上層建築的「B」圈的問題 - 它willnow移動的標籤，以便它在'A'區域的某些不與'B'重疊的區域中。一些細節在這裏問題在這裏：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我寫了一個類似的問題。