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

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 吗？如果我们能看到您的代码，会更容易为您提供帮助。

希望对您有所帮助。

我最好的，

弗兰克