【d3js】结合pack和chord图进行多维数据展示

原创
2015/05/14 10:42
阅读数 848

D3js的chord图提供了展示元素之间联系的一个很好渠道,但是维度不够多,下图是常见搜索案例(http://bl.ocks.org/mbostock/4062006): 在此输入图片描述 这背后的数据其实是一个矩阵: var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; 数值就对应相应的连线宽度

但是这样的数据结构其实可以使用的场景比较有限,因为这个矩阵的所有数据都在展示的环上,因此,其实这只能表现一个维度的数据。

怎么能让他展示更多维度的数据呢?通过引入第二层显示并且自定义chord图的连线方式可以做到这一点。

这是我们给某客户提供的流量信息图,通过引入pack图作为第二层用于展示流量来源,我们通过pack图这种形式获得了展示数据源的群组特性的能力,将pack图置于整图的内部,并且和外部的chord图进行连线用于标示流量信息,表现了这样一个四维信息结构:

[来源位置、来源群组、目的位置、流量信息]

在此输入图片描述

实现思路如下: 1)将chord的matrix改为对角矩阵(去除元素之间的对应关系) 2)分别使用两层绘制chord图和pack图 3)以pack图元素和chord图元素作为起始和结束点进行连线

—————————————————————————————————————————— MinkTech工作组致力于大数据管理及可视化平台建设,Golang相关技术研发、开源项目推广,欢迎和大家多多交流

展开阅读全文
打赏
0
0 收藏
分享
加载中
这两种图结合是需要更改d3.js的源码吗?如何让两个图叠在一起显示呢?
2016/04/07 14:35
回复
举报
更多评论
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部