d3js制作打包图

最新推荐文章于 2025-04-11 10:33:29 发布

原创

最新推荐文章于 2025-04-11 10:33:29 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何利用d3.js库制作具有视觉吸引力的打包图。通过展示具体的效果图和探讨所需的数据结构，帮助读者理解如何在项目中实现此类数据可视化。

效果图:

数据结构

{
"name":"中国",
"children":
[
	{ 
	  "name":"浙江" , 
  	  "children":
  	  [
	  	  	{"name":"杭州" },
	  	  	{"name":"宁波" },
	  	  	{"name":"温州" },
	  	  	{"name":"绍兴" }
  	  ] 
  	},
	{ 
		"name":"广西" , 
		"children":
		[
			{"name":"桂林"},
			{"name":"南宁"},
			{"name":"柳州"},
			{"name":"防城港"}
		] 
	},
	{ 
		"name":"黑龙江",
		"children":
		[
			{"name":"哈尔滨"},
			{"name":"齐齐哈尔"},
			{"name":"牡丹江"},
			{"name":"大庆"}
		] 
	},
	{ 
		"name":"新疆" , 
		"children":
		[
			{"name":"乌鲁木齐"},
			{"name":"克拉玛依"},
			{"name":"吐鲁番"},
			{"name":"哈密"}
		]
	},
	{ 
		"name":"河北" , 
		"children":
		[
			{"name":"石家庄"},
			{"name":"唐山"},
			{"name":"邯郸"},
			{"name":"秦皇岛"}
		]
	},
	{ 
		"name":"西藏" , 
		"children":
		[
			{"name":"拉萨"},