javascript - 调用 .raise() 后回到之前的子顺序

Question

我正在用 d3js 构建一个网络(基本上是节点和链接)

当我将鼠标悬停在一个节点上时，我想突出显示关联的链接并将它们置于父节点的顶部以使其真正可见

在鼠标悬停时，我做了这样的东西

// get links to highlight given the selected node
var highlightLinks = nodeLinks(id);

lines.each(function(index){

    // if index is in selected links
    if (highlightLinks.include(index)){

         // highlight link with yellow color
         this.setAttribute('style',"stroke:#ffc900")

         // raise the link on top of parent node
         d3.select(this).raise()
    }
    else {
         // else grey
         this.setAttribute('style',"stroke:#1B1B1B")
    }
}

它在第一次鼠标悬停时运行良好。但是当我出去时，我的行不再以相同的方式排列，并且 if 子句突出显示其他鼠标悬停的随机链接

我认为解决方案应该是在退出鼠标悬停时将链接重新排序，但我找不到执行此操作的方法。我已将 movedIndex 存储为数组

我想要什么:

• (状态 1) 我在第一次鼠标悬停之前的链接:[0,1,2,3,4,5]
• (action 1) 输入鼠标悬停突出显示 1 和 2，提升它们，存储 movedIndex = [1,2]
• (状态 2) 鼠标悬停后我的链接:[0,3,4,5,1,2]
• (操作 2) 退出鼠标悬停突出显示 1 和 2，用 movedIndex 做一些魔术来“取消”它们
• (状态 3) 我的链接应该再次为:[0,1,2,3,4,5]

Answer 1

如果您不更改数据，最简单的替代方法是 selection.order() ，其中:

Re-inserts elements into the document such that the document order of each group matches the selection order.

因此，在 mouseout 事件中你需要的是:

lines.order();

这是一个简单的演示(使用 v7):

const svg = d3.select("svg");
const circles = svg.selectAll(null)
  .data(d3.range(0, 1.2, 0.2))
  .enter()
  .append("circle")
  .attr("r", 40)
  .attr("cy", 50)
  .attr("cx", d => 80 + 240 * d)
  .style("fill", d3.interpolateTurbo);

circles.on("mouseover", event => d3.select(event.currentTarget).raise())
  .on("mouseout", () => circles.order());

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="400" height="100"></svg>