如何找到所有选定节点的相邻节点和边缘？ D3

Question

我有一个力有向图，可以双击一个节点，只显示该节点及其邻居，其余的给定一个隐藏类 -> 可见性：隐藏

但这仅适用于一个节点。我有能力选择多个节点并给他们一个 selectedNode 类。

现在我希望在所有具有 selectedNode 类的节点上使用这种相邻算法。这样所有选定的节点和连接它们的边仍然会显示出来，而未选定的节点和边将被隐藏。

这是我显示/隐藏边缘的方式。同样，这只适用于一个节点d3.select(this).node().__data__;。我试过d = d3.selectAll("selectedNode").data(); 但没有运气:(

var linkedByIndex = {};//Create an array logging what is connected to what

for (i = 0; i < graph.data.nodes.length; i++) //-populate the array
{
    linkedByIndex[i + "," + i] = 1;
};


graph.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];
}

d = d3.select(this).node().__data__;


links.classed("hidden", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? false : true;
        });

添加代码

var links = inner.selectAll(".link").append("g")
    .data(force.links())
    .enter().append("line")
    .attr("id", "links")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; })
    .style("marker-end",  "url(#arrow)") //adds arrows, main code on SVG append towards bottom
    .style("stroke-width", lineWidth)   
    ;

Answer 1

我认为这里有两个问题，由于您缺乏细节，我将做出假设。

1) 你有一个方法来检查两个节点是否是邻居。这是一个好的开始，但这还不够，您还需要一种方法来告诉您任何给定节点是选定节点还是它的邻居之一。假设您在数组selected 中维护一个选定节点的列表，下面是这样一个函数在一个简单的实现中的样子：

function shouldBeVisible(nodeIndex){
    // visible if either selected itself or neighbour of a selected node
    return selected.some(function(d){
        // assuming you don't care about the direction of your edges
        return linkedByIndex[nodeIndex+','+d]+linkedByIndex[d+','+nodeIndex];
    });
}

您甚至可以重载此方法以使其“边缘友好”：

function shouldBeVisible(sourceIndex, targetIndex){
    if (targetIndex !== undefined)
        return shouldBeVisible(sourceIndex)
            && shouldBeVisible(targetIndex);
    else return selected.some(function(d){
        return linkedByIndex[sourceIndex+','+d]
             + linkedByIndex[d+','+sourceIndex];
    });
}

请注意，如果您不维护数据结构中的选定节点，您应该能够使用d3.selectAll('.selectedNode') 轻松检索它们。您可能希望为边缘实现类似的方法。

2) 您只是根据first node in the selection 而不是all nodes in the selection 检查邻域。无论哪种方式，假设links 准确地描述了它所指的内容，您都不必费心这样做。

试试这样的：

links.classed("hidden", function(d) {
    return !shouldBeVisible(d.source.index, d.target.index);
});