简介
D3 是一款流行的 JavaScript 数据可视化库，它提供了各种强大的工具和功能，用于创建交互式和动态的数据可视化。其中一个很受欢迎的特性是力导向图（Force directed Graph），它将节点和链接作为物理对象处理，并使用力学模拟算法来确定它们之间的位置和关系。
在力导向图中，通常需要在节点周围添加标签，以便用户更好地理解节点的含义。同时，在用户悬停在节点上时，将标签放大可以提高可读性。在本文中，我们将介绍如何使用 D3 添加文本标签到力导向图节点，并在悬停时调整标签大小。
实现步骤
- 首先，我们需要定义力导向图的布局。在 D3 中，可以通过
d3.forceSimulation()方法来创建一个基础的力导向图布局。以下是一个简单的示例：
const simulation = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink().links(data.links))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));在这个例子中，我们传入了节点和链接数组数据，然后定义了三个力：链接力（forceLink()）、多体力（forceManyBody()）和中心力（forceCenter()）。链接力通过连接节点来定义图形的形状，多体力处理节点之间的相互作用，中心力将节点集中在图形的中心。
- 接下来，我们需要创建节点和链接的 SVG 元素。在 D3 中，可以使用
d3.select()和d3.selectAll()方法来选择元素并将数据绑定到它们上面。
-- -------------------- ---- ------- ----- ----- - ---------------------- ----------------- -------- --------------- -------------- -------- ----- ----- - ---------------------- ----------------- -------- ----------------- -------------- ------- ---------- ---
在这个例子中，我们首先选择所有的链接（.link），将链接数组数据绑定到它们上面，并添加新的链接元素。然后，我们选择所有的节点（.node），将节点数组数据绑定到它们上面，并添加新的圆形节点元素。
- 现在我们可以添加文本标签到节点上了。对于每个节点，我们可以使用
d3.select(this)方法来选择当前节点 SVG 元素，然后添加一个包含文本的<text>元素。
nodes.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text((d) => d.name);在这个例子中，我们将 dx 和 dy 属性设置为在节点右侧和以下文本的位置，然后将文本内容设置为节点数据中的 name 属性。
- 最后，我们需要在悬停时调整标签大小。我们可以使用
d3.select()方法来选择当前节点文本 SVG 元素，然后使用.transition()和.attr()方法来改变文本元素的大小。
-- -------------------- ---- -------
--------------------- ---------- -
------------------------------
-------------
--------------
------------------ --------
--
--------------- ---------- -
------------------------------
-------------
--------------
------------------ --------
---在这个例子中，我们为每个节点添加了鼠标悬停事件。当鼠标悬停时，会选择当前节点，选择文本元素并在 200
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27764