程序地带

图论可视化和算法库: cytoscape.js


什么是cytoscape.js

  cytoscape.js是一个图论相关的可视化, 可响应, 且自带一些基本图论算法的js库。截至我写这篇博客的时候cytoscape.js在github上仍然相当活跃,既有商业应用也有开源软件使用这个库, 是一个相当可靠的库。有兴趣请访问其官方网站


使用cytoscape.js

  cytoscape可以跑在各种各样的地方,浏览器和Node.js都可以使用, cytoscape.js也提供了各种包格式。


基本概念
element

  一个图最基本的元素就是“节点”(node)和“边”(edge), 在cytoscape.js 中,大体上可以认为这两者就是cytoscape的元素(element), 并且可以使用javascript object字面量表示,也可以导出到JSON或者从JSON导入(也就是说自带了序列化)


const aNode = {
group: 'nodes', // 表明自己是node
data: {
id: '001', // 必须字段
/* 一些自定义属性 */
},
classes: ["foo", "bar"] // 自定义element 的类别
}
const anEdge = {
group: 'edges', // 一条edge
data: {
id: '002',
weight: 75,
source: '001',
target: '003'
}
}
const cy = cytoscape({ // 使用对象字面量初始化一个图
container: document.getElementById("cy"), // 指定渲染到哪个HTML节点上
elements: [ // 图所含的元素
aNode, anEdge /* ... */
],
style: [ // 可以使用style 属性控制图在Html上的显示样式
{
selector: 'node', // 样式选择器, 和css选择器非常类似, node和edge是可以直接用的。具体可以参见文档
style: { // 这里的style对象可以将每个node 的显示label设置为自己的id
label: 'data(id)'
}
}
]
})
core

  core 基本上就是指代的使用cytoscape函数生成的图对象本身, 该对象代表了整个图。使用者操控图都是通过core对象来完成的, 比如添加节点使用cy.add函数等


collection

  Collection代表了图中一部分集合, 比如cy.filter(selector)方法返回满足selector选中的元素集合。   一般来说Collection是不可变的, 也不需要从collection接口访问api来修改图的元素(从core就可以)从某种程度上可以将collection看作数据库中的“视图”。官网列出了一些可以通过Collection修改元素很少见的例外情况, 有兴趣可以参考。


selector

  除了在stylesheet中控制不同类型元素的样式之外, selector在cytoscape.js中扮演了非常重要的角色, 比如可以在cy.$或者cy.filter中传入字符串表示的selector得到一个collection; cy.remove函数直接传入selector来删除满足selector的元素。   基本上css支持的选择器cytoscape.js都支持, 具体可以参见官网, 最下面就是Selector章节. 这里提两点需要注意的


data字段指定的对象中的字段可以使用[]选择器
const cy = cytoscape({
elements: {
nodes: [
{
data: {
id: '001',
area: 400
}
},
...
]
},
...
});
cy.remove("[area = 400]")
classes 中指定的class可以使用’.classname’选择器来选择
const cy = cytoscape({
elements: {
nodes: [
{
data: {
id: '001'
},
classes: ["foo", "bar"]
},
...
]
},
...
});
cy.remove(".foo")
cytoscape.js 提供的功能

  cytoscape.js 提供了很多很有意思的功能, 这里指列举一些我觉得很有意思的


交互

  cytoscape.js 的交互做的非常好网页使用者可以很方便的和可视化的图进行交互。


屏幕缩放

  自带屏幕缩放功能, 并且支持触控手势


节点选中和拖动

  也是0配置自带的功能


强大的事件系统

  自带事件系统, 可以监听和触发交互事件和自定义事件


图论算法

  cytoscape.js 支持许多基本的图论算法, 比如最小割, A*算法, 最短路径树生成, 广度优先搜寻和深度有限搜寻等算法。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40085040/article/details/112689518

随机推荐

机器视觉-简单入门小例子

*读入图像read_image(Image,'fabrik')*获取图像大小get_image_size(Image,Width,Height)*设置窗口大小dev_open_wind...

烤红薯配鱿鱼丝 阅读(705)

mysql技巧_30个MySQL数据库常用小技巧

无论是运维、开发、测试,还是架构师,数据库技术是一个必备加薪神器,那么,一直说学习数据库、学MySQL,到底是要学习它的哪些东西呢...

黄子衿 阅读(550)

webpack的chunkFilename详细说明

你知道chunkFilename的作用吗?了解之前,先了解懒加载,动态导入的功能。通常,一个网页会有自身的侧重点:1、假如你在Yo...

前端精髓 阅读(693)