D3.js 如何在鼠标悬停时将一个节点及其所有连接的节点置于图形的前面？

（编辑：问题解决了，见下文）我是一名生物学家，负责绘制突触连接图并分析数据。我有一些可视化网络的想法，我认为这些想法很酷，我一直在尝试学习D3，以便以一种我可以通过web共享可视化的方式实现它们。我有一个由节点和链接组成的图。当我将鼠标移到某个节点上时，我希望该节点以及所有连接的节点移动到图形的顶部，以免被周围的节点遮挡。一般来说，我对编程相当陌生，所以如果这是一个愚蠢的问题，请原谅。现在，我使用迈克·博斯托克（Mike Bostock）在回答其他人的问题时提出的建议，让它直接在模式上运行。。也就是说，要定义将某物移动到第一个子位置的函数：

d3.selection.prototype.moveToFront = function() { 
return this.each(function() { this.parentNode.appendChild(this);}); 
}; 

还要创建连接节点的索引（取自另一篇文章）

然后有一个mouseover函数，它使用以下内容：

function nodeMouseover(d){
     d3.select(this).moveToFront();
         svg.selectAll("circle").transition()
               .duration(250)
               .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
               .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
}

现在，所有这些都可以用于将我鼠标移到前面的节点。我还希望将所有连接的节点移到前面，因此我要做的是：使用节点的.active类属性（该属性已成功分配给所有连接的节点）要在mouseover函数中再次调用moveToFront，使它们也移动到前面，如下所示：

function nodeMouseover(d){
     d3.select(this).moveToFront();
         svg.selectAll("circle").transition()
               .duration(250)
               .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
               .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
         svg.selectAll(".active").moveToFront();
}

function nodeMouseover(d){
                svg.selectAll(".link").attr("display", function(p){return isConnectedEdge(d, p) ? "block" : "none";});

                svg.selectAll("circle").each(function(e){if (isConnectedNode(d,e)){d3.select(this).moveToFront();}})
                                        .transition()
                                        .duration(250)
                                        .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})}

但是，这不起作用，我似乎不明白为什么。。。有什么想法吗？有什么简单的方法吗？我在这里玩得很开心，并试图真正了解这里的工作原理，因此非常感谢您的帮助

解决方案： 好的，通过使用.each（）语句可以解决所有问题。我的nodeMouseover现在看起来像这样：

function nodeMouseover(d){
     d3.select(this).moveToFront();
         svg.selectAll("circle").transition()
               .duration(250)
               .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
               .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
         svg.selectAll(".active").moveToFront();
}

function nodeMouseover(d){
                svg.selectAll(".link").attr("display", function(p){return isConnectedEdge(d, p) ? "block" : "none";});

                svg.selectAll("circle").each(function(e){if (isConnectedNode(d,e)){d3.select(this).moveToFront();}})
                                        .transition()
                                        .duration(250)
                                        .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})}

---

请注意，我不再使用class属性。这是最好的方法吗？再次感谢所有看过它的人。

当你说它不起作用时，你是什么意思？您是否收到任何错误消息？没有错误消息，它只是不会将“.active”类的内容移动到组的顶部。。。我很困惑，因为高亮显示的节点被移动了。。。（所以第一个moveToFront命令可以工作…）您是否验证了所有的类都是“active”的？谢谢您的回复。。。是，在鼠标上，正确的节点切换到class=“active”。使用相同的选择，它们也可以正确地更改节点的半径。也许这与我在nodeMouseover中将类更改为active有关，而这还不能正确选择类？我不知道。这是另一个线索。。。如果我用修改属性的东西替换moveToFront，比如说节点的填充颜色，只有当我非常快速地将鼠标移到一堆节点上时，它才会起作用。。。