在有向圖中重新排序svg元素

Question

我有一個有價值鏈接的力有向圖。我放入一個滑塊控件，根據鏈接的值刪除和添加鏈接（滑動到0.5，僅顯示權重爲0.5和更高的鏈接）。

爲此，我通常會刪除所有鏈接並根據滑塊條件將其添加回來。我遇到的問題是，當我將鏈接添加回圖表時，它們出現在節點的頂部。

我想節點是最高的「z-索引」，但我知道SVG沒有z-索引。我如何重新排列元素，使節點回到頂端？我查看了d3.select.order（）和d3.select.sort（），但我不太清楚如何使用它們來完成這種重新排序。

Answer 1

我建議設置display屬性爲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>