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

本文介绍如何在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><

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值