D3.js 是一个流行的 JavaScript 数据可视化库，它支持各种类型的可视化图表，包括力引导图。在力引导图中，节点和链接是通过物理模型模拟相互作用来放置在空间中的。本文将介绍如何使用 D3.js 在力引导图中突出显示选定的节点及其链接与子节点。
准备工作
我们需要先创建一个基本的力引导图并绑定我们的数据（节点和链接）。我们可以使用以下代码：
-- -------------------- ---- -------
----- ---- - -
------ -
- --- --- --
- --- --- --
- --- --- --
- --- --- --
- --- --- --
--
------ -
- ------- ---- ------- --- --
- ------- ---- ------- --- --
- ------- ---- ------- --- --
- ------- ---- ------- --- --
- ------- ---- ------- --- --
--
--
----- ----- - ----
----- ------ - ----
----- --- - ----------------
-------------- ------
--------------- --------
----- ---------- - ------------------------------
---------------- -------------------
-------------- -------------------------
---------------- -------------------- - -- ------ - ----
----- ---- - ---------------
------------------
-----------------
--------
---------------
--------------- --------
----- ---- - ---------------
--------------------
-----------------
--------
-----------------
---------- ---
------------- -------------
--------------------- -- -- -
----
----------- --- -- -----------
----------- --- -- -----------
----------- --- -- -----------
----------- --- -- ------------
----
----------- --- -- ----
----------- --- -- -----
---这个代码片段创建了一个包含5个节点和5个链接的简单力引导图，并使用 D3.js 来将它们渲染到 SVG 上。
突出显示选定节点及其链接与子节点
现在，我们假设我们希望突出显示一个名为 "B" 的节点及其所有链接和子节点。我们需要执行以下步骤：
- 获取目标节点及其链接和子节点的数组。
- 将这些节点和链接着色为不同的颜色。
下面是实现这些步骤的示例代码：
-- -------------------- ---- -------
----- ---------- - ------------- -- -
----- ----------- - ------------- --------------------------------
----- ----- - ------------------------ -- -
------ ----------------------- -- ------- --- -------------- -- ------- --- ----------------
---
----- ---- - -----------------------
-----------------
------------- --- -- ----------------------- - ----- - -------------
----- ---- - ---------------------
------------
--------------- -------
------------
-----------------
---------- ---
------------- --- -- ----------------------- - ----- - -------------
------------
---------------
--------------- -------
---------------------
---------------------
--
----- -------------- - ------ -- -
----- ----------- - ---
------------------------- -- -
-- ------------ --- ----- -
------------------------------
-------------------------------------------------
-
---
------ ------------
--
---------------- ------- -- -- -
--------------
---
--
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------