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

时间:2012-06-28 11:14:17

标签: javascript svg graph d3.js force-layout

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

顺便说一下,你能把你的例子发布到bl.ocks.org吗?如果我们能够看到您的代码,那么帮助您会更容易。

我希望这会有所帮助。

我最好,