如何在d3力定向图中高亮显示(更改颜色)所有连接的(邻居)节点和链接

Question

我在这里看到了这个例子http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html我可以在一定程度上理解它，我可以进行基本的更改，但无法具体做一件事，即突出显示（更改颜色）所有连接的节点。例如，如果我将鼠标悬停在节点1上或单击节点1，它应该找到所有相邻的节点，并通过更改颜色来突出显示链接路径。

我看到在d3中从svg外部的一个按钮点击一个节点，但我无法在这个例子中使用它。

如果有人能在这里提供帮助并修改现有代码以实现对连接节点/链接的搜索，我将不胜感激。

如果这真的是一个非常基本的问题，而我在这里遗漏了一些非常明显的东西，我深表歉意。

Answer 1

我建议阅读阻力行为文档：https://github.com/mbostock/d3/wiki/Drag-Behavior.因此，更改节点颜色的基本方法是在拖动启动事件上切换类。例如，考虑以下CSS：

.node {
  stroke: #000000;
  stroke-width: 1.5px;
}
circle.others{
 fill: #C0C0C0;    
} 

现在考虑一下，为了这个例子，您已经将节点表示为圆（这在d3力定向图中完成：http://bl.ocks.org/mbostock/4062045)，然后可以在d3脚本中注册一个dragstart事件，如下所示：

function dragstart(d) { 
 d3.selectAll("circle").classed("others",true);  
 d3.select(this).classed("others", false); 
}   

这个想法同样适用于链接。希望能有所帮助！

Answer 2

在d3.jsv4中，您应该这样做，它应该可以正常工作。

首先，拖动开始：

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
    d3.selectAll("line").transition().duration(500)
        .style("opacity", function (o) {
            return o.source === d || o.target === d ? 1 : 0;
        });
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", function (o) {
            return neighboring(d, o) ? 1 : 0;
        });
}

第二，拖动结束：

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
    d3.selectAll("line").transition().duration(500)
        .style("opacity", 1);
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", 1);
}

当然，您应该定义一个邻居函数：

graph.links.forEach(function(d) {
      linkedByIndex[d.source.index + "," + d.target.index] = 1;
      linkedByIndex[d.target.index + "," + d.source.index] = 1;
    });
function neighboring(a, b) {
    return a.index == b.index ||  linkedByIndex[a.index + "," + b.index];
}