Question

我使用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

Answer 1

如果你把这个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;
}

Answer 2

这几乎是this question的完整复制和粘贴，请参阅此处了解详情。

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

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

2 个答案: