강제 지시 그래프의 svg 요소 재정렬

Question

나는 값어치 링크가있는 강제 지시 그래프가 있습니다. 나는 링크의 값에 따라 링크를 제거하고 추가하는 슬라이더 컨트롤을 넣었습니다 (0.5로 슬라이드하고 0.5 이상의 링크 만 표시됨).

이렇게하려면 일반적으로 모든 링크를 제거하고 슬라이더 기준에 따라 다시 추가하십시오. 내가 가지고있는 문제는 그래프에 링크를 다시 추가하면 노드의 TOP에 나타납니다.

노드가 가장 높은 "z- 인덱스"가되도록하고 싶지만 SVG에는 z- 인덱스가 없다는 것을 알고 있습니다. 노드가 맨 위로 돌아가도록 요소를 재정렬하려면 어떻게해야합니까? d3.select.order() 및 d3.select.sort()를 살펴 보았지만이 순서를 수행하는 데 d3.select.order()를 사용하는 방법을 잘 모르겠습니다.

Answer 1

노드 추가 및 제거 대신 표시 속성을 none으로 설정하는 것이 좋습니다. 당신이 무게의 개별 번호가있는 경우

또는, 당신과 같이, CSS와 함께 할 수 있습니다 :

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <style type="text/css"> 
    <!-- Hide all links with weights that we don't want --> 
    .weight0,.weight2,.weight4,.weight6 {display:none} 
    </style> 
    <a xlink:href="#" class="weight0"> 
    <text y="20">weight 0</text> 
    </a> 
    <a xlink:href="#" class="weight2"> 
    <text y="40">weight .2</text> 
    </a> 
    <a xlink:href="#" class="weight4"> 
    <text y="60">weight .4</text> 
    </a> 
    <a xlink:href="#" class="weight6"> 
    <text y="80">weight .6</text> 
    </a> 
    <a xlink:href="#" class="weight8"> 
    <text y="100">weight .8</text> 
    </a> 
    <a xlink:href="#" class="weight10"> 
    <text y="120">weight 1</text> 
    </a> 
</svg>