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

原创

于 2014-11-23 18:58:53 发布 · 7.3k 阅读

CC 4.0 BY-SA版权

文章标签：

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

1. 数据

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

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

第 1 行：分区图的布局。

第 2 行：sort 设定内部的顶点的排序函数，null 表示不排序。

第 3 行：size 设定转换后图形的范围，这个值很重要，运用得当可变为圆形分区图。

第 4 行：value 设定表示分区大

200万优质内容无限畅学