如何在d3力向图中高亮显示(更改颜色)所有连接的(邻居)节点和链接 [英] how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph

问题描述

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

I saw this example here http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html I can understand it to an extent where I can make basic changes, but have not been able to do one thing specifically which is to highlight (change color) of all connected nodes. e.g If I mouse over node 1 or click on node 1,it should find all neighboring nodes and highlight the link paths by changing color.

我查看了从svg 外部的按钮单击d3中的一个节点已经回答了，但是我无法在此示例中使用它.

I looked at clicking a node in d3 from a button outside the svg already answered but I couldn't make it work on this example.

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

I will be grateful if someone can help here and modify the existing code to achieve the searching of connected nodes/links.

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

I do apologize if this is really a very basic question and I am missing something really obvious here.

推荐答案

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

In d3.js v4 , you should just do it like this and it should just work.

首先，拖动开始:

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

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

Of course, you should define a neighbor function:

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

这篇关于如何在d3力向图中高亮显示(更改颜色)所有连接的(邻居)节点和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！