在强制有向图中突出显示节点及其邻居节点答案

【问题标题】：Highlight a node and its neighbour node in force directed graph在强制有向图中突出显示节点及其邻居节点
【发布时间】：2014-04-14 18:11:46
【问题描述】：

我使用D3.JS 库创建了一个力有向图，

在mouseover 上，我想做的是突出显示一个节点及其相邻节点并淡出所有其他节点。

在mouseout 事件中，我想按原样重置图表。

我已经为高亮部分尝试了以下代码，但它不起作用：

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

下面是link for my force directed graph

【问题讨论】：

This question 和 this question 可能会有所帮助。
@LarsKotthoff 我已经使用以下示例更新了我的代码，但仍然无法正常工作。 plnkr.co/edit/d3a92HOodd7lQdPr6wQd?p=preview

标签： javascript d3.js

【解决方案1】：

这几乎是来自this question的完整复制和粘贴，详细说明见那里。

我唯一改变的是通过过渡淡出/淡入节点/链接，并在用于确定邻居的数据结构的两个方向上添加连接。完成演示here。

【讨论】：

【解决方案2】：

如果你 fork 这个plunker 并研究主要部分，它可能会变得更容易：

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

function isConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}

【讨论】：