Question

我在D3中创建了一个动态构建的力图。当我点击其中一个链接时，我只想显示该链接和所有连接的链接/节点。

这个Plunkr是我所拥有的简化版本：http://plnkr.co/edit/TiKKmvydqXNipe103juL?p=preview（编辑：我已经更新了这个，现在是一个完整的解决方案）。

正如你所看到的，有三个独立的“组”连接节点，在我的真实数据集中有几百个节点，我希望能够隔离一个单独的“组”，并且只显示当链接是单击该组的一部分（它不能是单击的节点，因为这会显示一个包含更多信息的弹出窗口。）

我已经能够通过预处理我的数据并使用相当复杂且冗长的算法来确定链接是否在同一个连接组中来着色/隐藏连接的链接。

我也可以通过更改dragstart函数来更改点击的节点或所有节点/链接，这感觉就像我越来越接近，但我认为它不会识别任何链接关系。

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    // Changes all nodes/links
    d3.select("circle").classed("others",true).style("display","none"); 
    // Trying different ways to hide only 'other' nodes
    d3.selectAll("circle").classed("others",true).style("display","none"); 
    d3.selectAll("line").classed("others",true).style("display","none");

    d.fx = d.x;
    d.fy = d.y;
}

（我知道这个问题/答案how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph，但我认为这不会有帮助。）

任何帮助都将不胜感激。

Answer 1

好的，这可能超出我的范围，但我认为你需要将链接分组为与节点相同的组。如果你能以某种方式添加＆＃34;组＆＃34;源节点的属性到链接，然后当你点击链接时，这样的东西可能会起作用：

d3.selectAll("line")function fade(){if 
(group = "selected", "opacity" = 1)
else
("opacity" = 0)
};

或者，如果您可以在加载数据之前将链接分组（在PHP等脚本中），那么您可以使用单独的类追加3（或n）组行。

对不起，JS不是我的强项，希望有经验的人会为我们解决这个问题......

在D3（v4）强制图中隐藏除了所选连接节点之外的所有节点

1 个答案: