正如其他答案中所解释的，SVG 没有 z-index 的概念。相反，文档中元素的顺序决定了绘图中的顺序。

除了手动对元素重新排序之外，对于某些情况还有另一种方法：

使用 D3 时，您经常会遇到某些类型的元素，这些元素应该始终绘制在其他类型的元素之上。

例如，在布置图形时，链接应始终放置在节点下方。更一般地，一些背景元素通常需要放置在其他所有元素的下方，而一些高光和叠加层应该放置在上方。

如果您遇到这种情况，我发现为这些元素组创建父组元素是最好的方法。在 SVG 中，您可以使用该g元素。例如，如果您的链接应始终放置在节点下方，请执行以下操作：

svg.append("g").attr("id", "links")
svg.append("g").attr("id", "nodes")

现在，当您绘制链接和节点时，请按如下方式选择（选择器以#引用元素 id开头）：

svg.select("#links").selectAll(".link")
// add data, attach elements and so on

svg.select("#nodes").selectAll(".node")
// add data, attach elements and so on

现在，所有链接将始终在结构上附加在所有节点元素之前。因此，SVG 将显示所有节点下方的所有链接，无论您添加或删除元素的频率和顺序如何。当然，所有相同类型的元素（即在同一个容器内）仍将遵循它们添加的顺序。

开发人员提出的解决方案之一是：“使用 D3 的排序运算符对元素进行重新排序。” （见https://github.com/mbostock/d3/issues/252）

有鉴于此，可以通过比较元素的数据或位置（如果它们是无数据元素）来对元素进行排序：

.on("mouseover", function(d) {
    svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})

由于 SVG 没有 Z-index 而是使用 DOM 元素的顺序，因此您可以通过以下方式将其置于最前面：

this.parentNode.appendChild(this);

然后，您可以例如使用insertBefore将其放回原处mouseout。然而，这要求您能够定位您的元素之前应该插入的兄弟节点。

演示：看看这个JSFiddle

SVG 不做 z-index。Z-order 由其容器中 SVG DOM 元素的顺序决定。

据我所知（过去我已经尝试过几次），D3 不提供分离和重新附加单个元素以将其带到前面或诸如此类的方法。

有一个.order()方法，它重新排列节点以匹配它们在选择中出现的顺序。在您的情况下，您需要将单个元素放在前面。因此，从技术上讲，您可以将所需元素放在前面（或在最后，不记得哪个是最上面的），然后调用order()它。

或者，您可以跳过此任务的 d3 并使用普通 JS（或 jQuery）重新插入该单个 DOM 元素。

简单的答案是使用 d3 排序方法。除了 d3.select('g').order() 之外，版本 4 中还有.lower()和.raise()。这会改变元素的显示方式。请查阅文档以获取更多信息 - https://github.com/d3/d3/blob/master/API.md#selections-d3-selection