数据可视化之cytoscape.js

标签: 数据可视化 cytoscape
18人阅读 评论(0) 收藏 举报
分类:

因为数据要展示双向关系,最终选用了cytoscape.js。

效果如图,echarts只能显示单项数据关系。

据我理解,这个插件分两种,一种是基于jquery的,另一种是原声的。

基于jquery是加在jquery对象上的。因为基于jquery的无法在线上显示关系。最终选择了原生

 cy = cytoscape({
    container: document.getElementById('echart'),//容器名字
    boxSelectionEnabled: false,
    autounselectify: true,

   style: cytoscape.stylesheet()
        .selector('node')//节点样式
        .css({
            'content': 'data(name)',
            'text-valign': 'center',
            'color': 'white',
            "height": 60,
            "width": 60,
          
            'text-outline-width': 2,
            'text-outline-color': '#316383',//颜色设置
            "background-color": "#316383",
            "label": "data(label)"
        })
        .selector('edge')//边线样式
        .css({
            'curve-style': 'bezier',
            "label": "data(label)",
            'target-arrow-shape': 'triangle',
            'target-arrow-color': 'black',
            'line-color': '#ccc',
            'width': 1
        })
        .selector(':selected')
        .css({
            'content': 'data(value)',
            'background-color': 'red',
            'line-color': 'red',
            'target-arrow-color': 'red',
            'source-arrow-color': 'red'
        })
        .selector('.background')
       .css({
           "text-background-opacity": 1,
           "text-background-color": "#ccc",
           "text-background-shape": "roundrectangle",
           "text-border-color": "#000",
           "text-border-width": 1,
           "text-border-opacity": 1
       })
       .selector('node[label="main"]')//主节点样式设置
       .css({
           "background-color": '#d0413e',
           'text-outline-width': 2,
           'text-outline-color': '#d0413e',

       })
        .selector('.faded')
        .css({
            'opacity': 0.25,
            'text-opacity': 0
        }),
  /*  style: [
        {
            selector: 'node',
            css: {
                'content': 'data(name)',
                'text-valign': 'center',
                'color': 'white',
                "height": 40,
                "width": 40,
                'text-outline-width': 2,
                'text-outline-color': '#6dce9e',
                "background-color": "#6dce9e",
                "label": "data(label)"
            }
        },

        {
            selector: 'edge',
            css: {
                'curve-style': 'bezier',
                "label": "data(label)",
                'target-arrow-shape': 'triangle',
                'target-arrow-color': '#ccc',
                'line-color': '#ccc',
                'width': 1
            }
        }
    ],*/
    elements: data.elements//

});

var layout = cy.layout({
    name: 'concentric',这是控制图形形状的
    fit:true,
    padding: 30, // the padding on fit
    startAngle:4/ 2 * Math.PI, // where nodes start in radians
    sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
    clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
    equidistant: false, // whether levels have an equal radial distance betwen them, may cause bounding box overflow
    minNodeSpacing: 100 // min spacing between outside of nodes (used for radius adjustment)
});

layout.run();

这就是简单的初始化及一些配置。

详情可查看官方网站http://js.cytoscape.org/#cy.reset

查看评论

如何将form保存到图片中!

public void OnSaveJPG() {Rectangle rect = getBounds();BufferedImage image = (BufferedImage)createIma...
  • programlover
  • programlover
  • 2001-10-07 10:51:00
  • 426

用vis.js库实现Neo4j的可视化

用vis.js库实现Neo4j的可视化用visjs库实现Neo4j的可视化 visjs简介 功能需求 实现步骤获取查询结果 转换数据格式 指定绘图容器 配置绘图参数 绘图实例参考 最终结果 总结vis...
  • qq_32653877
  • qq_32653877
  • 2017-05-08 21:43:31
  • 680

基于CytoScape.js的可视化研究

一次可怕的可视化技术,恩恩,都怪自己太渣
  • Mr_Ming_
  • Mr_Ming_
  • 2017-10-27 23:49:07
  • 729

cytoscape.js

Cytoscape.js 是一个开源的 JavaScript  图形库,用以数据分析和可视化。Cytoscape.js 可以轻松的继承到网站或 Web 应用中,实现交互的可视化图形。 使用cytos...
  • lexwoefm
  • lexwoefm
  • 2013-12-30 19:53:14
  • 4823

用cytoscape.js展示neo4j网络关系图 - 3. cytoscape.js

要完成的功能要把neo4j数据库里面的Movie数据正确的显示到前端,我们需要完成如下的功能。 搭建基于Flask的简单网站 用py2neo来获取neo4j的节点及关系 用cytoscape.js来显...
  • zhongzhu2002
  • zhongzhu2002
  • 2015-05-28 13:58:08
  • 10684

cytoscape使用教程

  • 2015年01月02日 14:38
  • 2.12MB
  • 下载

Cytoscape Web 网络拓扑

  • 2014年01月20日 11:22
  • 209KB
  • 下载

Cytoscape绘图初探

Cytoscape是一个做网络图的js插件,用起来很方便,而且很强大。http://www.cytoscape.org/what_is_cytoscape.html...
  • ll328062201
  • ll328062201
  • 2014-11-04 16:18:25
  • 1129

Cytoscape使用教程

Cytoscape之操作界面介绍http://mp.weixin.qq.com/s?__biz=MzI5MTcwNjA4NQ==&mid=2247484184&idx=...
  • mystrugglelife
  • mystrugglelife
  • 2018-02-28 00:33:19
  • 167

Cytoscape Web 实现网络拓扑结构图

官网帮助文档http://cytoscapeweb.cytoscape.org/tutorial,demo http://cytoscapeweb.cytoscape.org/demos。 可运行实例...
  • ajuan1212
  • ajuan1212
  • 2014-01-20 11:31:08
  • 2090
    个人资料
    等级:
    访问量: 58
    积分: 67
    排名: 160万+
    文章存档