D3 서클을 맨 위에 올리시겠습니까?

Question

저는 서클 세트를 맨 위에 올리려고합니다.

[JS] 
function brushUser(userList){ 
    userMapSvg.selectAll('circle') 
     .data(userNodes) 
     .classed('selected', function(d){ 
      if (contains(userList, d.firmwideId)){ 
       return true; 
      } 
      else 
       return false; 
      }); 
} 

[CSS] 
#selector-usermap-body circle { 
    fill: steelblue; 
    z-index: 1; 
} 

#selector-usermap-body circle.selected{ 
    stroke: black; 
    stroke-width: 2; 
    z-index: 10; 
} 

하지만 작동하지 않습니다.

CSS 및 클래스에서이 작업을 수행 할 수 있는지 궁금합니다.

질문은 this과 유사하지만 우아한 방법을 찾고 있습니다.

Answer 1

@ScottCameron이 지적한 것처럼, 이것을 수행하는 유일한 방법은 노드를 실제로 이동하는 것입니다. 일반적으로, 형제 요소의 무리, 이것은 할 매우 간단하다

circle.on('mouseover', function() { 
    this.parentNode.appendChild(this); 
}); 

현재 작동하는 예를 볼 수있다 : 나는 이러한 기능 중 어느 것도 SVG에 사용할 수 있음을 확신 http://jsfiddle.net/nrabinowitz/5J37Z/

Answer 2

는 Z- 인덱스 작업

Answer 3

SVG Z-인덱스의 명시 적 개념이없는 확인하기 위해 원에 position:absolute;를 추가합니다. SVG 내에서 Z 순서를 얻는 유일한 방법은 노드를 주변으로 이동시켜 나중에 원하는 노드가 맨 아래에 원하는 노드보다 나중에 DOM에 표시되도록하는 것입니다.

SVG 2에 추가하는 방법에 대한 이야기가 있지만 아직까지는 초기 개발 단계에 있습니다. http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input.