2

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

我查看了从已回答的 svg 外部按钮单击 d3 中的节点，但我无法使其在此示例中起作用。

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

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

4

2 回答 2

0

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

.node {
  stroke: #000000;
  stroke-width: 1.5px;
}

circle.others{

 fill: #C0C0C0;    
}

现在考虑到为了这个例子你已经将你的节点表示为圆圈（这是在 d3 Force Directed Graph 中完成的：http: //bl.ocks.org/mbostock/4062045），然后你可以在你的d3 脚本，如下所示：

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

}

同样的想法，也可以应用于链接。希望有帮助！

于 2014-01-10T03:59:56.230 回答
0

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

首先，拖动开始：

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];
}
于 2017-08-24T03:09:05.097 回答