在 D3 (v4) 力图中隐藏所有但选定的连接节点

Question

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

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

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

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

我还可以通过更改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

好的，这可能超出了我的范围，但我认为您需要以某种方式将链接分组到与节点相同的组中。如果您可以以某种方式将源节点的“组”属性添加到链接中，那么当您单击链接时，可能会出现这样的情况：

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

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

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