以下是百度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');

Echarts中graph类型的运用求教的更多相关文章

  1. 记录使用echarts的graph类型绘制流程图全过程(一)-x,y位置的计算

    先说下本次案例业务需求,输入2个节点,获取数据后绘制出2个节点间的路径,之前使用的是网状图,但是网状图的效果不佳,需要转换成流程图的模式: 那么如何在不修改数据的情况下,实现类似效果尼? 看了下ech ...

  2. 记录使用echarts的graph类型绘制流程图全过程(二)- 多层关系和圆形图片的设置

    本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...

  3. ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...

  4. Echarts中太阳图(Sunburst)的实例

    Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...

  5. 详解Java 8中Stream类型的“懒”加载

    在进入正题之前,我们需要先引入Java 8中Stream类型的两个很重要的操作: 中间和终结操作(Intermediate and Terminal Operation) Stream类型有两种类型的 ...

  6. SQL 中不同类型的表连接

    http://www.linuxidc.com/Linux/2012-08/68035.htm 1.简介 在关系型数据库中,join操作是将不同的表中的数据联合在一起时非常通用的一种做法.首先让我们看 ...

  7. Object-C中动态类型对象相关操作汇总

    Object-C(以后简称OC)中有id类型,相对于明确定义类型的静态类型,称为动态类型. 使用动态类型,配合多态(不同类型拥有同名方法),动态绑定(运行时决定实际调用的方法)可以将很多判断延迟到运行 ...

  8. MYSQL中 ENUM 类型

    MYSQL中 ENUM 类型的详细解释 ENUM类型 ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串(&quo ...

  9. 第66课 C++中的类型识别

    1. 类型识别 (1)在面向对象中可能出现下面的情况 ①基类指针指向子类对象 ②基类引用成为子类对象的别名 ▲静态类型——变量(对象)自身的类型(定义变量类型时类型或参数类型) ▲动态类型——指针(引 ...

随机推荐

  1. VScode启动后cup100%占用的解决方法

    新安装的vscode,版本1.29.1.启动后,cpu占用一直是100%,非常的卡.百度以下,找到了解决方法,整理一下. 解决方法:在VScode中文件->首选项->设置->搜索-& ...

  2. nginx ssl 自签证书实验

    两台服务器 11.11.11.3     (生成证书然后到CA服务上注册) 11.11.11.4    (nginx服务.CA证书签发) 1.建立CA服务器(11.3) .在CA上生成私钥文件 在/e ...

  3. 三种方法更改MAC OS X下的HOSTS文件

    1.终端更改 用程序里面打开终端(terminal),输入 sudo vi /etc/hosts 然后提示输入系统密码 hosts文件就自动打开了 接着输入 i 进入编辑模式 将添加的网站,ip拷贝进 ...

  4. Beta冲刺! Day2 - 砍柴

    Beta冲刺! Day2 - 砍柴 今日已完成 晨瑶:大致确定了文章推荐的算法思路(Content-based recommender):理清了不少feature的事宜 昭锡:修复了日期选择越界时导致 ...

  5. localStorage 知识点

    先补充下localStorage 知识点:JS对象读取形式:localStorage.name添加/修改localStorage.name = "xuanyuan"其中" ...

  6. Linux基础第四课——文件操作

    文件的创建 touch sudo touch 文件1 文件2 文件3 #支持批量创建文件 sudo rm -f 文件1 文件2 文件3 #支持批量创建 也支持批量删除 echo '谁动谁输,对不起我输 ...

  7. centos7下安装docker(12.1bridge网络)

    容器默认使用的时bridge网络 docker安装时会创建一个 命令为docker0的linux bridge.如果不指定--network=,运行的容器会默认挂到docker0上 interface ...

  8. windows下elasticsearch6.X安装IK分词器

    文章来源:https://www.cnblogs.com/hts-technology/category/1167823.html (一)到官网下载https://github.com/medcl/e ...

  9. linux计划任务(转)

    文章转自https://blog.csdn.net/jixieyang3701/article/details/79410725 linux 系统则是由 cron (crond) 这个系统服务来控制的 ...

  10. 20175310《Java2实用教程》第4周学习总结

    20175310 <Java程序设计>第4周学习总结 教材学习内容总结 本周学习了第五章子类与继承的内容,这章主要讲的是面向对象的两个内容:继承与多态.其中重点是方法重写.对象的上转型对象 ...