ogma
Ogma是Linkurious的JavaScript图形可视化库。Ogma的一个实例是一个javascript对象,它在内部存储一个图形, 并根据样式规则在HTML容器中呈现它。
Ogma有两个版本:
- ogma.min.js标准版
- ogma.dist.min.js包含Ogma和所有可选的依赖项
客户端
单个HTML页面
在单页面应用程序中,Ogma可以作为脚本导入:
<!-- Import Ogma -->
<script src="path/to/ogma.min.js"></script>
<!-- Import Ogma and all optional dependencies-->
<script src="path/to/ogma.dist.min.js"></script>
图形
图表包含通过关系(边缘)彼此连接的实体(节点)。每个节点和边缘都嵌入了一个可用于存储自定义属性的数据对象。
除了用于操作内部图形的API之外,Ogma还提供了便捷的函数来生成随机图形,导入图形和连接到外部数据源。
// Import a graph from a file and set it as ogma's internal graph.
ogma.parse.jsonFromUrl('data/myfile.json').then(function (rawGraph) {
ogma.setGraph(rawGraph);
// Retrieve the nodes from the 'Customer' category.
// 'Category' is a property stored in the node's data object.
var customers = ogma.getNodes().filter(function (node) {
return node.getData('Category') === 'Customer';
});
// Print the customers's names to the console.
// 'name' is a property stored in the node's data object.
console.log(customers.getData('name').join());
});
HTML容器
Ogma的一个实例绑定到一个HTML容器(通常是一个
var ogma = new Ogma({
container: 'graph-container'
});
相当于:
var ogma = new Ogma();
ogma.setContainer('graph-container');
Ogma公开了一个API来访问和修改其内部图。这些函数使用Node,Edge,NodeList和EdgeList格式的节点和边。
创建节点和边
让我们在图中添加一些节点和边。请注意,必须在边之前添加节点。当添加或删除许多节点或边缘(超过1,000)时,使用批处理函数(例如ogma.addNodes())比使用它们各自的对应物(例如ogma.addNode())更高效。
// Manually create nodes
ogma.addNodes([
{id: 'john', data: {name: 'John Doe', age: 55}},
{id: 'jane', data: {name: 'Jane Doe', age: 55}},
{id: 'john_jr', data: {name: 'John Doe Jr', age: 15}},
{id: 'jane_jr', data: {name: 'Jane Doe Jr', age: 18}},
]);
ogma.addEdges([
{id: 'e1', source: 'john_jr', target: 'jane', data: {name:'parent'}},
{id: 'e2', source: 'jane_jr', target: 'jane', data: {name:'parent'}},
{id: 'e3', source: 'john', target: 'jane', data: {name:'spouse'}},
]);
访问节点和边缘
函数ogma.getNode()和ogma.getNodes()(resp。ogma.getEdge()和ogma.getEdges())从Ogma的内部图中检索节点(相应的边)。可以链接这些函数以遍历图形并收集符合特定条件的节点。
// Get node by id.
// nJohnJr is a Node object.
var nodeJohnJr = ogma.getNode('john_jr');
// Get nodes by id.
// parents is a NodeList object.
var parents = ogma.getNode(['john', 'jane']);
// Get all edges
// addEdges is an EdgeList object.
var addEdges = ogma.getEdges();
// Get the children of Jane
var neighbors = ogma.getNode('jane')
.getAdjacentEdges()
.filter(function(edge) {
return edge.getData('name') === 'parent';
})
.getSource();
自定义数据
边和节点也可以存储自定义数据(在data属性中)。可以ogma.getData(propertyName)
使用Node,Edge,NodeList和EdgeList对象可用的功能检索自定义数据。让我们检索匹配特定条件的节点,然后将它们的名称打印到控制台。
// Store all nodes with an age property above 50 in an NodeList object.
var youngsters = ogma.getNodes().filter(function(node) {
return node.getData('age') > 50;
});
console.log(youngsters.getData('name').join(', '));
ogma的更多相关文章
- iOS UI、Xcode、调试、代码等常见问题总汇(持续更新中)
以前比较懒,遇到问题解决了就完事了,有些问题再次遇到时忘记了当初是怎么解决的,又要查各种资料来解决.好记忆不如烂笔头,不管简单还是复杂都记一下吧,所以决定写一篇常见问题总结,方便以后查阅.现在有点忙, ...
- 异常:带有 CLSID {} 的 COM 对象无效或未注册
今天处理调试打印程序的时候,看到这个异常: 代码: try { string strApplyEmpno=""; string strApplyDeptCode="&qu ...
- qq邮箱html邮件,图片不显示的问题
测试无论是站外的图片还是站内的图片,qq邮箱都会过滤图片,导致显示不出来. 解决办法:图片base64编码.效果图: 代码: <div class="container"&g ...
- 高性能内存图数据库RedisGraph(二)
这篇文章主要介绍用一下RedisGraph的历史和现状. 2018年5月,Redis Labs发布了RedisGraph的预览/测试版.6个月后,在Redis Labs和开源社区的开发者们的共同努力下 ...
随机推荐
- Linux学习之路4——文件IO打开、创建、读写操作
1.使用man 2 open.man 2 creat.man 2 write.man 2 read命令获取头文件 语法: int open(const char *pathname, int flag ...
- 用Python将一个列表分割成小列表
用Python将一个列表分割成小列表 2018年01月15日 11:09:25 幸福丶如此 阅读数:16842 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- drf相关问题
drf自定义用户认证: 登录默认 使用django的ModelBackend,对用户名和密码进行验证.但我们平时登录网站时除了用户名也可以用邮箱或手机进行登录,这就需要我们自己扩展backend 一. ...
- Django 对接 支付宝支付, 回调
平台 点击这里进入 蚂蚁金服开放平台 沙箱 点击这里进入 沙箱环境 初始界面 设置公钥 下载创建秘钥工具 1. 进入文档中心 这里 2. 选中 电脑网站支付 3. 进入后选中 API 列表 中的 统 ...
- CENTOS手动安装修复python ,YUM
CENTOS手动安装修复YUM
CENTOS手动安装修复YUM 2019年3月8日 杨宇 Comments 0 Comment 目录 [hide] 一.问题场景 二.手动修复 2.1 下载 rpm 包 2.2 安装 rpm 包 ...
- echarts 折线图自定义颜色与修改legend颜色
option4 = { title : { text: '', subtext: '' }, color:['#2db7f5','#ff6600','#808bc6'], //关键加上这句话 ...
- k8s常用命令演示
kubectl run --image=xxx name_xx --port kubectl run --image=nginx nginx-app --port=80 kubectl expose ...
- JAVA helloworld!
idea创建java项目 https://jingyan.baidu.com/article/48b558e3f8f6637f39c09a44.html 本地文档运行 java helloworld ...
- Visual Studio Code 背景色自定义
1 寻找主体配置文件:默认的颜色主题配置文件都位于$RELEASE/resources/app/extensions目录中.以theme-开头的目录即为颜色主题配置(事实上,其中有些是文件图标主题). ...
- 【优秀的图片后期编辑工具】Luminar 3.1 for Mac
[简介] 今天和大家分享最新的 Luminar for Mac 3.1 版本,支持中文界面,Luminar是一款Mac上优秀的图片后期处理工具,功能类似 Photoshop Lightroom 等软 ...