cytoscape.js学习笔记（一）

写在前面

知识图谱的可视化要实现动态交互一般需要使用javascript，而其中较为成熟的JS库有cytoscape.js和D3.js等。经过查阅相关资料，D3.js比较底层，要实现高端操作所需的代码量较大，故采用cytoscape.js实现知识图谱的可视化。写博客记录下自己学习cytoscape.js的过程，也方便以后查阅。

demo

刚开始学习cytoscape.js，准备实现一个动态人物关系图的demo

• 导入cytoscape.js库

<!DOCTYPE html>

<html>
<head>
  <title>cytoscape demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!-- 导入cytoscape.js库-->
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

• 插入内部样式表设置网页样式

<style>
    body {
      font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
    }
    #cy {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      opacity: 0.7;
    }
    h1 {
      color:#3366FF;
      opacity: 0.5;
      font-size: 28px;
      font-weight: bold;
    }
  </style>

• 插入脚本，初始化视窗状态

<script>
	//增加监听事件，函数内初始化
    document.addEventListener('DOMContentLoaded', function () {
      var cy = window.cy = cytoscape({
        container: document.getElementById('cy'),	//container的值为DOM容器，表示显示图表的位置
        style: [	//设置样式的样式表
          {
            selector: 'node',	//设置节点样式
            css: {
              'content': 'data(name)',
               'color':'white',
               'text-valign': 'center',
               'text-outline-color': '#6699FF',
               'background-color': '#6699FF',
               'height': 60,
                'width': 60,
                'font-size':'14px',
                'font-weight': 'bold',
            }
          },
          {
            selector: 'edge',	//设置边的样式
            css: {
            'content':'data(relationship)',
              'curve-style': 'bezier',	//曲线类型为贝塞尔曲线
              'target-arrow-shape': 'triangle',
             'line-color': '#CCCCCC',
             'width': 1,
             'font-size':'14px',
            }
          }
        ],

        elements: {		//初始化元素
          nodes: [		//节点数据
            { data: { id:'n1',name: '江户川柯南' } },
            { data: { id:'n2',name: '毛利兰' } },
            { data: { id:'n3',name: '工藤新一' } },
            { data: { id:'n4',name: '工藤优作' } },
            { data: { id:'n5',name: '工藤有希子' } },
            { data: { id:'n6',name:'毛利小五郎' } },
            { data: { id:'n7',name:'妃英理' } },
            { data: { id:'n8',name: '铃木园子' } },
            { data: { id:'n9',name:'服部平次' } },
            { data: { id:'n10',name:'远山和叶' } },
            { data: { id:'n11',name:'怪盗基德' } },
            { data: { id:'n12',name:'阿笠博士' } },
            { data: { id:'n13',name:'目暮警官' } },
            { data: { id:'n14',name: '高木警官' } },
            { data: { id:'n15',name: '佐藤警官' } },
            { data: { id:'n16',name:'白鸟警官' } },
            { data: { id:'n17',name:'琴酒' } },
            { data: { id:'n18',name:'贝尔摩德' } },
            { data: { id:'n19',name:'伏特加' } },
            { data: { id:'n20',name: '灰原哀' } },
            { data: { id:'n21',name:'赤井秀一' } },
            { data: { id:'n22',name: '朱蒂老师' } },
            { data: { id:'n23',name:'小岛元太' } },
            { data: { id:'n24',name:'吉田步美' } },
            { data: { id:'n25',name:'圆谷光彦' } },
            { data: { id:'n26',name:'中森警官' } },
            { data: { id:'n27',name:'中森青子' } },
            { data: { id:'n28',name:'安室透' } },
          ],
          edges: [		//边的数据
          { data: { id:'e1',relationship: '照顾', source: 'n2', target: 'n1' } },
          { data: { id:'e2',relationship: '情侣', source: 'n3', target: 'n2' } },
          { data: { id:'e3',relationship: '父子', source: 'n3', target: 'n4' } },
          { data: { id:'e4',relationship: '母子', source: 'n3', target: 'n5' } },
          { data: { id:'e5',relationship: '父女', source: 'n2', target: 'n6' } },
          { data: { id:'e6',relationship: '母女', source: 'n2', target: 'n7' } },
          { data: { id:'e7',relationship: '好友', source: 'n2', target: 'n8' } },
          { data: { id:'e8',relationship: '好友', source: 'n3', target: 'n9' } },
          { data: { id:'e9',relationship: '情侣', source: 'n10', target: 'n9' } },
          { data: { id:'e10',relationship: '亦敌亦友', source:'n3', target: 'n11' } },
          { data: { id:'e11',relationship: '邻居', source: 'n3', target: 'n12' } },
          { data: { id:'e12',relationship: '原同事', source: 'n13', target: 'n6' } },
          { data: { id:'e13',relationship: '上司', source: 'n13', target: 'n14' } },
          { data: { id:'e14',relationship: '相恋', source: 'n15', target: 'n14' } },
          { data: { id:'e15',relationship: '单相思', source: 'n16', target: 'n15' } },
          { data: { id:'e16',relationship: '寻找下落', source: 'n17', target: 'n3' } },
          { data: { id:'e17',relationship: '同伙', source: 'n17', target: 'n18' } },
          { data: { id:'e18',relationship: '上司', source: 'n17', target: 'n19' } },
          { data: { id:'e19',relationship: '收留', source: 'n12', target: 'n20' } },
          { data: { id:'e20',relationship: '追查', source: 'n21', target: 'n18' } },
          { data: { id:'e21',relationship: 'FBI同事', source: 'n21', target: 'n22' } },
          { data: { id:'e22',relationship: '同学', source: 'n1', target: 'n23' } },
          { data: { id:'e23',relationship: '同学', source: 'n1', target: 'n24' } },
          { data: { id:'e24',relationship: '同学', source: 'n1', target: 'n25' } },
          { data: { id:'e25',relationship: '情侣', source: 'n27', target: 'n11' } },
          { data: { id:'e26',relationship: '父女', source: 'n27', target: 'n26' } },
          { data: { id:'e27',relationship: '部下', source: 'n28', target: 'n17' } },
          { data: { id:'e28',relationship: '追捕', source: 'n26', target: 'n11' } },
          { data: { id:'e29',relationship: '缩小', source: 'n3', target: 'n1' } },
          { data: { id:'e30',relationship:'夫妻', source: 'n4', target: 'n5' } },
          { data: { id:'e31',relationship:'夫妻', source: 'n6', target: 'n7' } },
          { data: { id:'e32',relationship: '同事', source: 'n16', target: 'n13' } },
          { data: { id:'e33',relationship: '背叛', source: 'n20', target: 'n17' } },
          { data: { id:'e34',relationship: '师傅', source: 'n6', target: 'n28' } },
          { data: { id:'e35',relationship: '对手', source: 'n28', target: 'n21' } },
          ]
        },
	//设置布局
        layout: {
          name: 'cose',	//一种默认布局方式
        }
      });
    });
  </script>
</head>

• 编写html文件的body

<body>
  <h1>名侦探柯南人物关系图</h1>
  <div id="cy"></div>
</body>

</html>

实现效果

总结

cytoscape.js库中包括以下变量：

变量名	主要功能
cy	核心，生成一个图的对象
node	节点的集合
edge	边的集合
ele	元素的集合

写在最后:第一次使用cytoscape.js库,主要实现初始化和一些配置，接下来将继续学习节点的增删和事件响应等内容。（由于不会jquery,所以js代码均为原生，也会去学一学jquery库）

参考博客：
cytoscape.js基础篇
cytoscape.jsAPI文档