Question

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

我看了clicking a node in d3 from a button outside the svg已经回答但我无法在这个例子上工作。

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

如果这是一个非常基本的问题，我很抱歉，我在这里遗漏了一些非常明显的东西。

Answer 1

我建议阅读Drag Behavior Documentation：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.js v4 中，您应该这样做，它应该可以正常工作。

首先，拖动开始：

shutdown.sh.

其次，拖动结束：

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

如何在d3力导向图中突出显示（改变颜色）所有连接（邻居）节点和链接

2 个答案: