【 D3.js 入门系列 --- 9.4 】集群图的制作

最新推荐文章于 2020-09-15 14:10:42 发布

原创

最新推荐文章于 2020-09-15 14:10:42 发布 · 1.4w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #cluster #diagonal #json #projection

本文介绍了如何使用 D3.js 创建集群图，展示中国省份及城市的包含关系。通过读取JSON数据，利用d3.json进行网络读取，转换并输出nodes和links数据。接着详细解释了nodes和links数据结构，最后提到了D3.js已提供的绘制线条函数，并提供了源代码查看链接。

本人的个人博客为： www.ourd3js.com

csdn博客为： blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

集群图（ Cluster ）通常用于表示包含与被包含关系。

现在我们给出数据，并将其可视化。数据的内容为：中国里包含的部分省份，省份里包含的部分城市。我们讲数据文件写在一个 JSON 文件中，再用 D3 来读取。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于它的语法规则，请各位自行查询百度百科等。数据如下：

{
"name":"中国",
"children":
[
	{ 
	  "name":"浙江" , 
  	  "children":
  	  [
	  	  	{"name":"杭州" },
	  	  	{"name":"宁波" },
	  	  	{"name":"温州" },
	  	  	{"