Cytoscape 可视化

使用说明 PLUGIN

Cytoscape是一个优秀的可视化工具,官方有PC桌面版(下载 )本和js版本(Github),本文主要介绍js版本。官方对js版本有诸多在线实例,见官网。Cytoscape可以绘制组织架构图、基因关系图、力图、流程图等,是非常强大的可视化工具。借助api或ui扩展插件可实现更多效果。本框架目前所使用的版本是v3.15.1。

基本使用

使用比较简单,首先当然是引入js文件,其次是创建一个有宽高的画布。

  • <script type="text/javascript" src="https://src.axui.cn/src/plugins/cytoscape/cytoscape.min.js"></script>
    <script type='text/javascript'>
        document.addEventListener('DOMContentLoaded', function(){
            var dataSimple = {
                nodes: [
                    {
                        data: {
                            id: '1',
                            name: '何鸿燊',
                        },
                    },
                    {
                        data: {
                            id: '2',
                            name: '梁安琪',
                        },
                    },
                    {
                        data: {
                            id: '3',
                            name: '何猷君',
                        },
                    },
                    {
                        data: {
                            id: '4',
                            name: '何超欣',
                        },
                    },
                ],
                edges: [
                    {
                        data: {
                            id: '1-2',
                            name: '情侣',
                            source: '1',
                            target: '2',
                        },
                    },
                    {
                        data: {
                            id: '2-3',
                            name: '母子',
                            source: '2',
                            target: '3',
                        },
                    },
                    {
                        data: {
                            id: '1-4',
                            name: '父女',
                            source: '1',
                            target: '4',
                        },
                    },
                    {
                        data: {
                            id: '3-4',
                            name: '兄妹',
                            source: '3',
                            target: '4',
                        },
                    },
                ]
            };
            var styleSimple = [
                {
                    selector: 'node',
                    style: {
                        label: 'data(name)',
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        label: 'data(name)',
                    }
                },
    
            ];
            var cySimple = window.cy = cytoscape({
                container: document.getElementById('cySimple'),
                layout: {name: 'random'},
                style: styleSimple,
                elements: dataSimple,
            });
    
        });
    </script>
                            
  •                                      <div id="cySimple" style="height:300px;"></div>
                                        

人物关系

使用比较简单,首先当然是引入js文件,其次是创建一个有宽高的画布。

  • <script type="text/javascript" src="https://src.axui.cn/src/plugins/cytoscape/cytoscape.min.js"></script>
    <script type='text/javascript'>
    
    </script>
                            
  •                                      <div id="line" style="height:200px;"></div>
                                        

实例

该实例主要用于创建家庭关系,已经包含了主要功能。