Javascript 在力有向图中高亮显示节点及其相邻节点

我使用

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

---

以下是

如果你用叉子叉一下，研究一下主要部分，可能会变得更容易：

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

---

如果你用叉子叉一下，研究一下主要部分，事情可能会变得更容易：

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

---

这几乎是一个完整的复制和粘贴，有关详细信息，请参见此处

---

我所做的唯一更改是通过转换淡出/淡入节点/链接，并向用于确定邻居的数据结构的两个方向添加连接。完整的演示。

这几乎是一个完整的复制和粘贴，有关详细说明，请参见此处

---

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

并且可能会有所帮助。@Larskothoff我已经用下面的示例更新了我的代码，但仍然不起作用。并且可能会有所帮助。@Larskothoff我已经用下面的例子更新了我的代码，但仍然不起作用。