d3.js 是一种流行的用于数据可视化的 JavaScript 库。其中，d3.hierarchy 可以将数据转换为树形结构，而 d3.tree 则可以根据树形结构生成可视化的树状图。本文将介绍如何使用 d3.js 在已有树状图基础上动态添加节点。
准备工作
为了方便起见，我们先准备一份静态的树状图代码，供后续动态添加节点使用：
--------- -----
------
------
----- --------------- --
--------- ---- ---------------
------- ---------------------------------------------
-------
----- -
----- ---- -----------
-
----- -
----- -----
------- -----
------------- ----
-
--------
-------
------
---- ----------- -------------------
--------
----- ---- - -
----- ----
--------- -
-
----- ----
--------- -- ----- --- -- - ----- --- ---
--
-
----- ----
--------- -- ----- --- -- - ----- --- ---
--
--
--
----- ---- - -------------------
------- - ---
------- - --- - ------------ - ---
----- ---- - ---------------------------- ----------
----- -------- - ----------------------- -- -------- -- -----
----- --- - -----------------
----- - - ---------------
------------------ -------------------- - ------------ - -------
-------------
--------------------- ----
----------------------- ----
------------------
-------------------------
-------------
-------------- -------
---------- - -- ----
---------- - -- ----
-------------- ---
--------------- ---
----------- ---
----------- ---
------------- -------
--------------- --------
-------------
------------------------ --------
--------------------- --
------------------
-------------------
-------------
-------------- -------
---------- ----------
---------
-------
-------代码中定义了一个名为 data 的树形结构数据，通过 d3.hierarchy 将其转换为树形结构。接着，使用 d3.tree 根据树形结构生成可视化的树状图，并且使用 d3.linkHorizontal 定义树状图节点之间的连线样式。最后，使用 d3.select 选取 SVG 元素，并在其内部添加树状图的节点和连线。
动态添加节点
接下来，我们将为树状图添加一个按钮，当点击按钮时会在当前树形结构的最后一层添加一个新节点。具体实现如下：
--------- -----
------
------
----- --------------- --
--------- ---- ---------------
------- ---------------------------------------------
-------
----- -
----- ---- -----------
-
----- -
----- -----
------- -----
------------- ----
-
--------
-------
------
---- ----------- -------------------
------- -------------------------------
--------
----- ---- - -
----- -
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------