【 D3.js 高级系列 — 4.0 】矩阵树图

最新推荐文章于 2021-09-26 12:51:14 发布

DecemberCafe

最新推荐文章于 2021-09-26 12:51:14 发布

阅读量9.9k

点赞数 1

分类专栏： D3.js D3 数据可视化 - 高级系列文章标签： d3 layout treemap 布局矩阵树图

本文链接：https://blog.csdn.net/lzhlzz/article/details/44871351

版权

本文介绍了如何使用D3.js创建矩阵树图，以展示浙江、广西、江苏三省份2013年GDP数据。通过数据转换、布局设置和绘制过程，详细解析了矩阵树图的制作方法，并提供了完整代码示例。矩阵树图是一种根据数据将区域划分为矩形集合的层级布局，常用于数据可视化。

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

矩阵树图（Treemap），也是层级布局的扩展，根据数据将区域划分为矩形的集合。矩形的大小和颜色，都是数据的反映。许多门户网站都能见到类似图1，将照片以不同大小的矩形排列的情形，这正是矩阵树图的应用。

图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/

现以浙江、广西、江苏三省份2013年的GDP作为数据，以GDP大小作为节点的权重将其制作成矩阵树图。

1. 数据

新建一个citygdp.json文件，内容如下：

{
	"name": "中国",
	"children":
	[
		{
			"name": "浙江",
			"children": 
			[
				{"name":"杭州", "gdp":8343},
				{"name":"宁波", "gdp":7128},
				{"name":"温州", "gdp":4003},
				{"name":"绍兴", "gdp":3620},
				{"name":"湖州", "gdp":1803},
				{"name":"嘉兴", "gdp":3147},
				{"name":"金华", "gdp":2958},
				{