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

2023-07-26 14:06:04

什么是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*算法, 最短路径树生成, 广度优先搜寻和深度有限搜寻等算法。

码农公寓