码迷,mamicode.com
首页 > Web开发 > 详细

【 D3.js 入门系列 --- 9.6 】 生产的包图

时间:2015-08-12 21:27:31      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

    我的个人博客是:www.ourd3js.com 

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

    转载请注明出处,谢谢。


    打包图( Pack )。用于包括与被包括的关系,也表示各个对象的权重,通经常使用一圆套一圆来表示前者,用圆的大小来表示后者。

    先看本节所使用的数据:  city2.json

    这是各城市所属关系的数据。我们如今要用 D3 的 layout 来转换数据,使其easy进行可视化处理。

var pack = d3.layout.pack()
	    			.size([ width, height ])
	    			.radius(20);
    上面定义了 pack 函数。size() 是转换后数据的尺寸,即转换后顶点的(x,y)。都会在这个 size 范围内。radius 是用于设定转换后最小的圆的半径。接下来要读取 json 文件,并将文件内容提供给 pack 函数,用于转换数据。
d3.json("city2.json", function(error, root) {
		var nodes = pack.nodes(root);
		var links = pack.links(nodes);
		
		console.log(nodes);
		console.log(links);
}
    上面用 pack 分别将数据转换成了顶点 nodes 和 连线 links。后面两句话的 console.log 用于输出转换后的数据。我们来看看数据被转换成了什么样。

技术分享
    上面的图片是顶点 nodes 的内容。我们能够看到。数据被转换后,多了深度信息(depth),半径大小(r)。坐标位置(x,y)等。我没有贴 links 的图片。由于我们此节并不正确连线进行绘制。
    不管用什么 layout 来转换数据,我们一定要先看看转换后的数据是什么。再进行绘制。否则非常easy出错。

    我们要绘制的内容有圆和文字。都在 SVG 中绘制。

代码例如以下:

svg.selectAll("circle")
			.data(nodes)
			.enter()
			.append("circle")
			.attr("fill","rgb(31, 119, 180)")
			.attr("fill-opacity","0.4")
			.attr("cx",function(d){
				return d.x;
			})
			.attr("cy",function(d){
				return d.y;
			})
			.attr("r",function(d){
				return d.r;
			})
			.on("mouseover",function(d,i){
				d3.select(this)
					.attr("fill","yellow");
			})
			.on("mouseout",function(d,i){
				d3.select(this)
					.attr("fill","rgb(31, 119, 180)");
			});
    这是绘制圆的代码,看过前面几节的朋友一定已经非常熟悉了吧。
    结果图例如以下:
技术分享
    鼠标操作的内容,请点击以下的链接自己尝试:
    完整的代码,右键点击浏览器查看。

版权声明:本文博客原创文章,博客,未经同意,不得转载。

【 D3.js 入门系列 --- 9.6 】 生产的包图

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4725393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!