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

당신은 마스터에서 최신 코드를 잡아해야합니다 이것은 당신이 대신 'A'라벨이 솟다 'B'원이 될 필요없이이 https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf

있던 문제를 해결해야한다 커밋 - 그렇게 레이블을 이동 willnow 'B'와 겹치지 않는 'A'영역의 특정 영역에있는 것입니다. 여기에이 문제에 대한 자세한 내용이 나와 있습니다. https://github.com/benfred/venn.js/issues/18

Answer 2

당신은 쉽게 실제 층에서 일을 찾을 수 있습니다 당신은 그들을 만들 g 요소를 사용할 수 있습니다 예를 들면 다음과 같습니다..

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

두 개의 g 요소가 DOM에 추가되었으며 특정 순서로 있기 때문에 에 추가하는 항목은 lowerLayer에 추가 된 항목 위에 나타납니다.

또한 체크 아웃 this answer 비슷한 질문에 대해 썼습니다.