【 D3.js 进阶系列 — 3.0 】 分区图

本文详细介绍了如何使用D3.js制作方形分区图,涵盖了数据处理、布局设置和图形绘制等步骤。通过数据转换,利用partition布局确定顶点坐标和尺寸,最后展示绘制的矩形和文字,实现中国城市所属关系的可视化。
摘要由CSDN通过智能技术生成

分区图( Partition ),也是 D3 的一个布局( Layout )。这个布局很有意思,可以做成方形也可能做成圆形,本文先介绍方形分区图的制作方法,这也是分区图最基本的形式。

301

分区图也是用于表示包含与被包含关系的。


1. 数据

本文使用【入门 - 第 9.4 章】的数据,内容为中国境内几个城市的所属关系。


2. 布局(数据转换)

var partition = d3.layout.partition()
			.sort(null)
			.size([width,height])
			.value(function(d) { return 1; });

第 1 行:分区图的布局。

第 2 行:sor

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值