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

graph对象的分析和简单的数据处理方法

作者沈墨空课程ECharts No.6 - 绘制人物关系图1928次浏览12017-03-09 23:40

今天没码代码就补个笔记好了。

这题主要的难点是如何将原始数据跟echarts的各种option对接上。
其实只要看看graph对象长什么样,再对照一下案例,大概就可以明白怎么做了。

这里我用我选的数据来举例,由于每个数据对象的属性稍微有些差异,所以实际还需要自己确认一下。


get到数据后首先用dataTool处理一下,这个是echarts的一个扩展要单独引入

var graph = echarts.dataTool.gexf.parse(ajaxResponseData);

然后我们在console里看一下graph的结构

graph {
  links: [],  // 存储节点连接线数据
  nodes: []  // 存储节点数据
}

我们分别看links[i]和nodes[i]的结构 //值是随便挑的一个

links[i] {
  id: '7034',  // 连线ID
  lineStyle: {},  // 线条样式
  name: null,  // 连线名
  source: '104.0',  // 连线起点
  target: '103.0'  // 连线终点
 }

links的数据的处理还是比较简单的,基本上id、name、source、target原始数据都有,可以看下需不需要改样式

nodes[i] {
  id: '99.0',  //  节点ID
  name: "Dude,Where's My Country?",  // 节点名
  attributes: {},  // 节点属性,根据这里的数据可以对数据进行分类
  category: '0',  // 节点类目,比如0对应的是第一个类目,如果没有需要自己添加
  value: '0',  // 节点值, 一般会用节点大小来表现值的大小
  itemStyle: {},  // 节点样式
  symbol: 'circle',  // 节点图标形状
  synbolStyle: {},  // 节点图标样式
  x: '23.31',  // 节点X坐标
  y: '120.84'  // 节点Y坐标
 }

而nodes的原始数据很可能只有id、name和attributes,其他就要自己根据数据特征来考虑下如何设置了。


比如我选的原始数据没有category、value和各种样式,所以我接下来需要对原始数据进行一些处理。

Nodes have been given values "l", "n", or "c" to indicate whether they are "liberal", "neutral", or "conservative".

根据数据的说明,我的原始数据分为三个类目,可以在attributes里读取到,分别是“l”、“n”、“c”,根据这些标记可以将节点分类

switch(node.attributes.value){        // 根据数据标记分类
  case 'l':
    ...
    break;
  case 'n':
    ...
    break;
  case 'c':
    ...
    break;
  default:
    ...  // 具体处理我全省略了,自行根据所选数据写吧
}

然后我们把数据放进option的series里

series: [{
  ...
  type: 'graph',
  data: graph.nodes,
  links: graph.links,
  ...  // 其他设置我省略了,具体自行查配置手册
}]

基本过程就这样

0条评论