MyException - 我的异常网
当前位置:我的异常网» JavaScript » 【 D3.js 入门系列 - 9.4 】 集群图的制造

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

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
【 D3.js 入门系列 --- 9.4 】 集群图的制作

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

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

    转载请注明出处,谢谢。


    集群图( Cluster )通常用于表示层级、上下级、包含与被包含关系。

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

{
"name":"中国",
"children":
[
	{ 
	  "name":"浙江" , 
  	  "children":
  	  [
	  	  	{"name":"杭州" },
	  	  	{"name":"宁波" },
	  	  	{"name":"温州" },
	  	  	{"name":"绍兴" }
  	  ] 
  	},
  	
	{ 
		"name":"广西" , 
		"children":
		[
			{"name":"桂林"},
			{"name":"南宁"},
			{"name":"柳州"},
			{"name":"防城港"}
		] 
	},
	
	{ 
		"name":"黑龙江",
		"children":
		[
			{"name":"哈尔滨"},
			{"name":"齐齐哈尔"},
			{"name":"牡丹江"},
			{"name":"大庆"}
		] 
	},
	
	{ 
		"name":"新疆" , 
		"children":
		[
			{"name":"乌鲁木齐"},
			{"name":"克拉玛依"},
			{"name":"吐鲁番"},
			{"name":"哈密"}
		]
	}
]
}
    其实我们光从数据上看,也很容易看出它们是用来表示什么的,是什么关系。好,现在开始进行可视化。同样的,先要用 Layout 转换数据。

var cluster = d3.layout.cluster()
    .size([height, width - 200]);
    上面代码定义了一个 cluster 的数据转换函数。.size 函数用于设定转换后的尺寸。接下来要用这个函数来转换数据:

d3.json("city.json", function(error, root) {
	
  var nodes = cluster.nodes(root);
  var links = cluster.links(nodes);
  
  console.log(nodes);
  console.log(links);

}

    d3.json 用于读取 JSON 文件。要注意,d3.json 只能用于网络读取,所以您必须搭建一个服务器来使用它,可用tomcat等搭建一个简易服务器来做试验。如果你将网页源文件和JSON文件放于本地同一文件夹下,将会出现下面错误提示:
    XMLHttpRequest cannot load file:///C:/Users/lzhlzz/Dropbox/lzh/d3js/9.4/city.json. Cross origin requests are only supported for HTTP. 

    json 函数后面跟一个无名函数 function ,里面的参数 root 用于读取数据的内容,后面两行代码调用 cluster 分别转换数据,并保存到 nodes 和 links 中。再后面两行用于输出转换后的数据文件,如下图所示:

nodes:


links:


    nodes 中有各个节点的子节点、深度、名称、位置(x,y)信息。links 中有连线两端( source , target )的节点信息。

    有了转换后的数据,就可以绘制了。其实 D3 已经基本上为我们准备好了绘制的函数,我们要学习的仅仅是查询并使用它们。

    绘制线条,我们可以使用:

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
    这是用于绘制对掉线的函数, .projection 用于设定它的投影。绘制的时候,我们这样使用它:

var link = svg.selectAll(".link")
      .data(links)
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", diagonal);
    这样就绘制了所有节点之间的连线。接下来我们再绘制节点。节点还是使用 svg 中的 circle 来绘制,这里就不复述了,前面已经讲过了,您也可以自己查看源代码。结果图为:

    如果您想查看源代码,请点击下面的网址,右键浏览器选择查看:

    http://www.ourd3js.com/demo/cluster.html






文章评论

中美印日四国程序员比较
中美印日四国程序员比较
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
旅行,写作,编程
旅行,写作,编程
程序员和编码员之间的区别
程序员和编码员之间的区别
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
 程序员的样子
程序员的样子
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
如何成为一名黑客
如何成为一名黑客
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
10个调试和排错的小建议
10个调试和排错的小建议
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java程序员必看电影
Java程序员必看电影
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
每天工作4小时的程序员
每天工作4小时的程序员
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
鲜为人知的编程真相
鲜为人知的编程真相
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的鄙视链
程序员的鄙视链
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
老程序员的下场
老程序员的下场
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
总结2014中国互联网十大段子
总结2014中国互联网十大段子
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
代码女神横空出世
代码女神横空出世
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
编程语言是女人
编程语言是女人
我是如何打败拖延症的
我是如何打败拖延症的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员必看的十大电影
程序员必看的十大电影
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员应该关注的一些事儿
程序员应该关注的一些事儿
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有