在力向图中高亮显示节点及其邻居节点 [英] Highlight a node and its neighbour node in force directed graph

问题描述

我已经使用D3.JS库

在mouseover上，我要突出显示一个节点及其邻居节点，然后淡出所有其他节点.

On mouseover what I would like to do is to highlight a node and its neighbour node and fade away all other nodes.

在mouseout事件上，我想按原样重设图形.

On mouseout event I want to reset the graph like the way it is.

我已尝试将以下代码用于突出显示部分，但无法正常工作:

I have tried the following code for the highlight part but its not working:

    .on("mouseover", function(d) { 

d3.select(this).select("circle").style("stroke-width", 6);
var nodeNeighbors = graph.links.filter(function(link) {

 return link.source.index === d.index || link.target.index === d.index;})
                        .map(function(link) {

 return link.source.index === d.index ? link.target.index : link.source.index; });

以下是我的受力导向图的链接

Following is thelink for my force directed graph

推荐答案

这几乎是

This is almost a complete copy and paste from this question, see there for the explanation of the details.

我唯一要做的更改是通过过渡淡入/淡入节点/链接，并在两个方向上向用于确定邻居的数据结构添加连接.完整的演示此处.

The only things I have changed is to fade the nodes/links out/in with a transition and added connections in both directions to the data structure that is used to determine the neighbours. Complete demo here.

这篇关于在力向图中高亮显示节点及其邻居节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！