1

（编辑：问题已解决，见下文）我是一名生物学家，致力于绘制突触连接并分析数据。我有一些关于可视化网络的想法，我认为这些想法很酷，我一直在尝试学习 D3，以便以我可以在网络上共享可视化的方式来实现它们。我有一个由节点和链接组成的图。当我将鼠标悬停在一个节点上时，我希望该节点以及所有连接的节点都移动到图表的顶部，以免被周围的节点遮挡。一般来说，我对编程很陌生，所以如果这是一个愚蠢的问题，请原谅。现在，我使用 Mike Bostock 针对其他人的问题提出的建议直接将鼠标悬停在模式上工作。也就是说，定义一个将某些东西移动到第一个子位置的函数：

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

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

var linkedByIndex = {};
links.forEach(function(d) {
    linkedByIndex[d.source.Id + "," + d.target.Id] = 1;
            });

function isConnectedNode(a, b) {
    linkedByIndex[a.Id + "," + b.Id] || linkedByIndex[b.Id + "," + a.Id] || a.Id == b.Id;
            }

然后有一个使用这些东西的鼠标悬停功能：

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";});
}

现在，这一切都适用于将我鼠标悬停的节点移动到前面。我还希望将所有 CONNECTED 节点带到前面，所以我想要做的是：使用 .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();
}

但是，这不起作用，我似乎无法弄清楚为什么......任何想法？有什么简单的方法可以做到这一点吗？我对此很开心，并试图真正了解这里的工作原理，因此非常感谢任何帮助。

解决方案：好的，一切都可以通过使用 .each() 语句来解决。我的 nodeMouseover 现在看起来像这样：

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 属性。这是最好的方法吗？再次感谢任何看过它的人。

4

0 回答 0