Question

我有一个带有重要链接的力导向图。我放入了一个滑块控件，可以根据链接的值删除和添加链接（滑动到0.5，只显示重量为0.5或更高的链接）。

为此，我通常会删除所有链接并根据滑块条件将其添加回去。我遇到的问题是，当我将链接添加回图表时，它们会显示在节点的顶部。

我希望节点是最高的“z-index”，但我知道SVG没有z-index。如何重新排序元素以使节点重新位于顶部？我查看了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>

在力导向图中重新排序svg元素

1 个答案: