隐藏D3(v4)力图中的所有未选中的已连接节点 [英] Hide all but selected connected nodes in D3 (v4) force graph

问题描述

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

I have created a dynamically built force graph in D3. When I click on one of the links I want to only show that and all the connected links/nodes.

此Plunkr是我所拥有内容的简化版本: http://plnkr.co/编辑/TiKKmvydqXNipe103juL?p =预览(我已经更新了它，现在是一个完整的解决方案).

This Plunkr is a simplified version of what I have: http://plnkr.co/edit/TiKKmvydqXNipe103juL?p=preview ( I have updated this and is now a complete solution).

如您所见，有3个独立的组"连接的节点，在我的真实数据集中有数百个节点，我希望能够隔离单个组"，并且仅在链接为单击该组的一部分(不能是被单击的节点，因为这会显示带有更多信息的弹出窗口).

As you can see there are 3 separate 'groups' of connected nodes, in my real data set there are several hundred nodes and I want to be able to isolate an individual 'group' and only show that when the link which is part of that group is clicked on (it can't be the node that is clicked on as this shows a pop-up with more info).

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

I have been able to colour/hide connected links by pre-processing my data and using a rather complicated and long winded algorithm to determine whether the links are in the same connected group.

我还能够通过更改dragstart函数来更改被单击的节点或所有节点/链接，这感觉就像我接近了，但我认为它无法识别任何链接关系.

I have also been able to change the node that is clicked on or all the nodes/links by changing the dragstart function, this feels like I am getting close, but I don't think it recognises any link relationships.

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

(我知道这个问题/answer

(I am aware of this question/answer how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph but I don't think it really helps).

任何帮助将不胜感激.

推荐答案

好的，这可能超出了我的范围，但是我认为您需要以某种方式将链接分为与节点相同的组.如果您可以通过某种方式将源节点的组"属性添加到链接中，则在单击链接时，可能会执行以下操作:

OK, this might be beyond me, but I think you somehow need to group your links into the same sorts of groups as your nodes. If you could somehow add the "group" attribute of the source node to the link, then when you click on the link something like this might work:

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

或者，如果您可以在加载数据之前将链接分为几组(在PHP等脚本中)，则可以用单独的类追加3(或n)行行.

alternatively, if you can sort the links into groups before the data is loaded (in your PHP etc. script), then you could append 3 (or n) groups of lines with separate classes.

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

Sorry, JS isn't my strongsuit, hopefully someone more experienced will sort that out for us...

这篇关于隐藏D3(v4)力图中的所有未选中的已连接节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！