突出显示一组节点及其之间的关系

Question

我正在使用 D3 制作一个力导向图，并且我在图表区域旁边的单独表格中显示了图表中显示的所有节点。我正在显示的表格中有复选框，这使我可以选择节点。

我试图突出显示节点和它们之间的关系。我一直从这个例子Highlight selected node, its links, and its children in a D3 force directed graph 中获得指导。此示例适用于一个特定节点及其子节点，但如果它们之间有任何关系，我会尝试突出显示多个节点。

对此的任何帮助都会非常有用。

Answer 1

我使用的不是力有向图，而是“Radial Hub and Spoke Diagram”（又名“Radial Wheel”），但前提应该是相同的。在我的示例中，关系由圆弧表示，关系中的节点位于圆弧的任一端。在示例中，您将看到我如何根据类型同时选择特定节点和/或关系（即，将鼠标悬停在任何弧或节点名称上）或许多节点和关系（将鼠标悬停在颜色编码类型键上）。

在任一选择示例中，归结为为绘图中的每个元素分配唯一标识符。您可以通过搜索 .attr("class"...) 和 .attr("id"...) 语句来了解我是如何做到这一点的。一旦您分配了此类唯一标识符，您就可以使用它们来创建选择组合。您可以看到我如何在 .on("mouseover", ...) 函数中执行此类选择。

顺便说一句，您能否将您的示例发布到 bl.ocks.org？如果我们能看到您的代码，会更容易为您提供帮助。

我希望这会有所帮助。

我最好的，

弗兰克