当前位置: 首页 > news >正文

Echarts中graph类型的运用求教

以下是百度Echarts官网上关系图的源码,但是这个关系图的node节点和edge都是静态文件里规定好的,我现在想动态实现,点击其中一个节点A然后新产生一个新节点B,并且有A和B之间的edge,就类似于百度的人物关系图谱那种动态生成,怎么实现啊?求教

myChart.showLoading();
$.get('data/asset/data/les-miserables.gexf', function (xml) {
myChart.hideLoading();

var graph = echarts.dataTool.gexf.parse(xml);
var categories = [];
for (var i = 0; i < 9; i++) {
categories[i] = {
name: '类目' + i
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = node.symbolSize;
node.label = {
normal: {
show: node.symbolSize > 30
}
};
node.category = node.attributes.modularity_class;
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
curveness: 0.3
}
}
}
]
};

myChart.setOption(option);
}, 'xml');

转载于:https://www.cnblogs.com/penglinjiang/p/5290982.html

相关文章:

  • haproxy 配置
  • iOS-绘图(Quartz2D)的简单使用(原创)
  • TCC89x的内存分布区域设置
  • spring bean的scope
  • J-Link的RTT功能实践
  • MVVM for silverlight
  • sort()的多种用法
  • 产品生产环节的一些名词
  • 生活随笔-为知笔记发布博客到博客园
  • 对你有用的名言集锦
  • 探究adroid活动
  • animation中的steps()逐帧动画
  • asm goto与JUMP_LABEL
  • 巧用工具制作视频截图索引文件
  • 进程遍历模块遍历
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • 【剑指offer】让抽象问题具体化
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • Cumulo 的 ClojureScript 模块已经成型
  • Druid 在有赞的实践
  • java2019面试题北京
  • JavaScript学习总结——原型
  • js
  • php中curl和soap方式请求服务超时问题
  • 彻底搞懂浏览器Event-loop
  • 从零开始学习部署
  • 免费小说阅读小程序
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 如何在 Tornado 中实现 Middleware
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 写给高年级小学生看的《Bash 指南》
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • puppet连载22:define用法
  • 扩展资源服务器解决oauth2 性能瓶颈
  • ​TypeScript都不会用,也敢说会前端?
  • ​插件化DPI在商用WIFI中的价值
  • !!java web学习笔记(一到五)
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • $.ajax()
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (编译到47%失败)to be deleted
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (二)c52学习之旅-简单了解单片机
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (四)【Jmeter】 JMeter的界面布局与组件概述
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • .cfg\.dat\.mak(持续补充)
  • .gitignore文件—git忽略文件
  • .net core 6 redis操作类