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

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

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


1. 数据

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


2. 布局(数据转换)

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

第 1 行:分区图的布局。

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

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

第 4 行:value 设定表示分区大小的值。这里的意思是:如果数据文件中用 size 值表示结点大小,那么这里可写成 return d.size。

接下来读取并转换数据,代码如下:

d3.json("city_tree.json", function(error, root) {
	if(error)
		console.log(error);
	console.log(root);

        //转换数据
	var nodes = partition.nodes(root);
	var links = partition.nodes(nodes);
        
        //输出转换后的顶点
	console.log(nodes);
}

来看看转换后的数据为何:

顶点中增加了几个变量,其中:

  • x: 顶点的 x 坐标位置
  • y: 顶点的 y 坐标位置
  • dx: 顶点的宽度 dx
  • dy: 顶点的高度 dy

3. 绘制

绑定顶点数据,分别绘制矩形和文字,代码如下:

	var rects = svg.selectAll("g")
				  .data(nodes)
				  .enter().append("g");
	
	rects.append("rect")
		.attr("x", function(d) { return d.x; })    // 顶点的 x 坐标
		.attr("y", function(d) { return d.y; })    // 顶点的 y 坐标
		.attr("width", function(d) { return d.dx; })  // 顶点的宽度 dx
		.attr("height", function(d) { return d.dy; })  //顶点的高度 dy
		.style("stroke", "#fff")
		.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
		.on("mouseover",function(d){
			d3.select(this)
				.style("fill","yellow");
		})
		.on("mouseout",function(d){
			d3.select(this)
				.transition()
				.duration(200)
				.style("fill", function(d) { 
					return color((d.children ? d : d.parent).name); 
				});
		});
	  
	rects.append("text")  
		.attr("class","node_text")
		.attr("transform",function(d,i){
			return "translate(" + (d.x+20) + "," + (d.y+20) + ")";
		}) 
		.text(function(d,i) {
			return d.name;	
		});

注意上面的注释处,好好体会转换后的数据是怎么运用的。


4. 结果

完整代码,请点击下面的链接,再右键点击查看源代码:

http://www.ourd3js.com/demo/J-3.0/rect_partition.html

文档信息

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。