百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

绘制人物关系图

作者凌翔洋课程ECharts No.6 - 绘制人物关系图2138次浏览12017-03-24 15:55

step 1

http://www-personal.umich.edu/~mejn/netdata/ 选择一份关系数据下载

step 2

用 gephi 对数据进行处理,布局,分类后导出成 gexf 格式。 快速入门 详细教程 布局

step 3

通过echarts.dataTool解析gexf数据; echarts.js并没有内置dataTool,需要自己下载并引入

echarts.dataTool

Object {version: "1.0.0", gexf: Object}
echarts.dataTool.gexf

Object {parse: t(e), proto:Object}
echarts.dataTool.gexf.parse(xml)返回值

xml为需要解析的gexf文件

Object {
nodes: Array[34],
links: Array[78],
proto: Object
}
nodes包含gexf图中的节点数据

{
attributes:{
betweenesscentrality:0,
closnesscentrality:0,
eccentricity:0,
harmonicclosnesscentrality:0,
modularity_class:0, //模块值
proto:Object
},
category:0,//类别
id:"1.0",
//节点样式
itemStyle:{
normal:{
color:"rgb(104,173,54)",
proto:Object
},
proto:Object
},
name: "1.0",
symbolSize: 47.5, //关系图节点标记的大小
x:33.86796,
y:388.1594
}
所对应的xml文档

<node id="1.0" label="1.0">
<attvalues>
<attvalue for="eccentricity" value="0.0"></attvalue>
<attvalue for="closnesscentrality" value="0.0"></attvalue>
<attvalue for="harmonicclosnesscentrality" value="0.0"></attvalue>
<attvalue for="betweenesscentrality" value="0.0"></attvalue>
<attvalue for="modularity_class" value="0"></attvalue>
</attvalues>
<viz:size value="47.5"></viz:size>
<viz:position x="33.86796" y="388.1594"></viz:position>
<viz:color r="104" g="173" b="54"></viz:color>
</node>
links包含gexf图中的边数据

{
id:"1",
lineStyle:{
normal:{
color:"rgb(0,109,44)",
proto:Object
},
proto:Object
},
name: null,
source :"3.0",
target: "1.0"
}
对应的xml文档

<edge id="0" source="2.0" target="1.0">
<viz:color r="0" g="109" b="44"></viz:color>
</edge>

0条评论