d3.js制作力学图

最新推荐文章于 2021-11-04 07:48:09 发布

Tong XU

最新推荐文章于 2021-11-04 07:48:09 发布

阅读量223

点赞数

分类专栏： d3

本文链接：https://blog.csdn.net/qq_41700374/article/details/102719982

版权

本文详细介绍了如何利用d3.js数据可视化库来构建力学图。从数据处理到图形渲染，逐步讲解了各个关键步骤，包括力导向图布局、节点和边的绘制以及交互功能的实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>力学图的制作</title>
		<script type="text/javascript" src="js/d3.js"></script>
		<script type="text/javascript" src="js/d3.min.js"></script>

	</head>
	<body>


		<script>
			let nodes = [{
					name: "GuiLin"
				},
				{
					name: "GuangZhou"
				},
				{
					name: "XiaMen"
				},
				{
					name: "HangZhou"
				},
				{
					name: "ShangHai"
				},
				{
					name: "QingDao"
				},
				{
					name: "TianJin"
				},
				{
					name: "BeiJing"
				},
				{
					name: "ChangChun"
				},
				{
					name: "XiAn"
				},
				{
					name: "WuluMuQi"
				},
				{
					name: "LaSa"
				},
				{
					name: "ChengDu"
				}
			]

			let links = [