数据可视化 D3.js实现力导向图之二（node带文字说明和提示）

最新推荐文章于 2025-06-06 16:47:17 发布

loganyang123

最新推荐文章于 2025-06-06 16:47:17 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： js 数据可视化 html 文章标签： d3 js d3 force 数据可视化

本文链接：https://blog.youkuaiyun.com/loganyang123/article/details/17540977

本文介绍如何在D3.js力导向图中添加节点的文字说明，通过对比官方示例和调整HTML结构，使得文字能正确显示。代码示例展示了如何创建带有文字的节点，并提供了一个简单的JSON数据示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从官方下载下的demo，直接加text带文字，始终未能显示出来，但是title却能显示出来，最后经过与网上其他地方做出来的例子用firebug进行跟踪对比，发现能够正确显示title的html里边g标签为node里边包含circle和text(circle、title和text是平级的)，而官方下载下来的demo里边circle包含着text和title，于是把append（“circle”）移到 call(force.drag);之后，用node直接append（“circle”），这样就能正确的显示出text来了（text和circle也是平级的了）.

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
/*
.node {
stroke: #ffffff;
stroke-width: 0.1px;
}
*/
.link {
stroke: #999;
stroke-opacity: .6;
}

</style>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<script src="d3.min.js"></script><