如何在D3强制布局中突出显示/选择邻居? [英] How do I highlight/select neighbours of neighbours in D3 force layout?

问题描述

我用它来突出显示邻居节点:

I have used this to help with highlighting neighour nodes:

http://jsfiddle.net/simonraper/jz2AU/light/

var toggle = 0;//Toggle stores whether the highlighting is on
var linkedByIndex = {};//Create an array logging what is connected to what

for (i = 0; i < network.network.data.nodes.length; i++) //-populate the array
{
    linkedByIndex[i + "," + i] = 1;
};
network.network.data.edges.forEach(function (d) //-checks what nodes are related in array
{
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//-------------------------check if nodes are linked
function neighboring(a, b) //This function looks up whether a pair are neighbours
{
    return linkedByIndex[a.index + "," + b.index];
}
//-------------------------finds out connected nodes, keeps their styles but changes the opacity of every other
function connectedNodes() {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
    if (toggle == 0) { 

        // nodes.classed("highlighted", function (o) {
            // return neighboring(d, o) | neighboring(o, d) ? true : false;
        // });      

        nodes.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });
        links.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });
        //Reduce the op
        toggle = 1;
    } else {
        //Put them back to opacity=1
        nodes.style("opacity", 1);
        links.style("opacity", 1);
        nodes.classed("highlighted", false);
        toggle = 0;
    }
}

这是当双击一个节点时，选定的节点及其邻居保持不透明度，而其他所有节点降低其不透明度.

What this does is when double clicking on a node, that selected node and its neighbours keep its opacity whilst all the others lower their opacity.

现在，当我双击第一个选定节点的一个子节点时，整个选择都会消失(所有节点的不透明度为1).

Now when I double click on one of the children of the first selected node, the whole selection goes away (the opacity of all nodes is 1).

我希望拥有的是，当我双击子节点之一时，选择不会消失，该子节点的相关节点现在变为突出显示".

What I wish to have, is that when I double click on one of the children nodes, the selection doesnt go away, the related nodes of that child node now become 'highlighted'.

这样做会帮助我轻松地通过力向图，尤其是在有大量数据的情况下.

Doing this will help guide me through the force directed graph easily, especially with much data.

推荐答案

为此尝试了大约一个小时，并且对代码进行了简单的更改

Been trying for around an hour for this and its a simple change to the code

将两个切换都更改为-toggle = 0;

Change both toggles to - toggle=0;

这样，在选择节点时不会清除选择，只会突出显示邻居

That way when selecting a node it doesn't clear the selection it just highlights the neighbours

这篇关于如何在D3强制布局中突出显示/选择邻居?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！