如何在 D3 强制布局中突出显示/选择邻居的邻居？答案

【问题标题】：How do I highlight/select neighbours of neighbours in D3 force layout?如何在 D3 强制布局中突出显示/选择邻居的邻居？
【发布时间】：2014-12-05 18:18:25
【问题描述】：

我用它来帮助突出显示相邻节点：

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

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

现在，当我双击第一个选定节点的其中一个子节点时，整个选择消失（所有节点的不透明度为 1）。

我希望拥有的是，当我双击其中一个子节点时，选择不会消失，该子节点的相关节点现在变为“突出显示”。

这样做将有助于引导我轻松完成力导向图，尤其是在有大量数据的情况下。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

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

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

选择一个节点时，它没有清楚选择它只是突出显示邻居

【讨论】：