Переупорядочить элементы svg в силе, направленном на график

Question

У меня есть диаграмма направленности силы с ценными ссылками. Я помещаю элемент управления ползунка, который удаляет и добавляет ссылки на основе значения ссылки (слайд до 0,5 и отображаются только ссылки весом 0,5 и выше).

Для этого я вообще удаляю все ссылки и добавляю их обратно на основании критериев ползунка. Проблема, которую я имею, состоит в том, что когда я добавляю ссылки обратно к графику, они появляются в верхней части узлов.

Я хочу, чтобы узлы были самым высоким «z-index», но я понимаю, что 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>