初识cytoscape.js

（cytoscape.js是一个做网页可视化的常用工具，http://js.cytoscape.org/ 这是他的官网，里面有很多很精美很牛批的案例。但是笔者很渣，接触到这个也是因为网页的功能需求，在接触这个之前甚至都不会js。而写这个的原因是因为在弄这个的时候发现网上的这类教程不多，甚至可以用少来形容。）
首先通过官网来到cytoscape的代码库，发现里面有很多文件和文件夹，但是我们用到的不多。解释一下几个重要的，dist是distribution的意思，放的是发布版本的代码。而我们要用的文件夹就是doumentation，进去之后发现又有几个文件夹，我们要用的代码都在js文件夹下，可以全部都下载下来。而另一个demo库里，是存放的例子，也可以下下来，作为初学者，案例是非常重要的，这也是我后期才发现的。之前在网上到处搜源码都没搜到，没想到近在眼前。
进入js文件夹后，经过多次测试，最基本的实现只要 cytoscape.min.js、cytoscape.js和jquery.js 这三个基本文件，然后在它官网上有详细的说明，但看起来挺麻烦的。贴一段可以实现的代码

    var cy=cytoscape(options={
        container:document.getElementById('cy'),
	    style:[
		    {
			    selector:'node',
			    css:{
			    	'content':'data(name)',
                    'font-family':'微软雅黑',
                    'font-size':5,
                    'color':'#DC143C',
                    'text-valign':'center'
                }
		    }

	    ],
        elements:{
	        nodes: [
		        { data: { id: 'j', name: 'Jerry', weight: 1} },
                { data: { id: 'e', name: 'Elaine',weight: 2} },
                { data: { id: 'k', name: 'Kramer', weight: 3 } },
		        { data: { id: 'g', name: 'George', weight: 4 }},
                {data:{id:'m',name:'mary',weight:5}}
	        ],

	        edges: [
		        { data: { source: 'j', target: 'e', id: 'je' } },
		        { data: { source: 'j', target: 'k', id: 'jk' } },
		        { data: { source: 'j', target: 'g', id: 'jg' } },
		        { data: { source:'j',target: 'm',id: 'jm'} }
	        ]
                },
//        elements:['lily','bob','juce','vic'],
        layout:{name:'circle'}, //circle,concentric,breadthfirst都可以
        zoom:1,
//        pan:{x:0,y:0},
	    minZoom: 0.5,
	    maxZoom: 2,
	    zoomingEnabled: true,
	    userZoomingEnabled: true,
	    panningEnabled: true,
	    userPanningEnabled: true,
	    boxSelectionEnabled: false,
	    selectionType: 'additive',
	    touchTapThreshold: 8,
	    desktopTapThreshold: 4,
	    autolock: false,
	    autoungrabify: true,
	    autounselectify: true,

	    // rendering options:
	    headless: false,
	    styleEnabled: true,
	    hideEdgesOnViewport: false,
	    hideLabelsOnViewport: false,
	    textureOnViewport: true,
	    motionBlur: true,
	    motionBlurOpacity: 0.2,`在这里插入代码片`
	    wheelSensitivity: 1,
	    pixelRatio: 'auto'

    }

    );

之后连上自己的数据库（这里要有php基础了），把数据写进去，这里用php和js嵌合的时候我卡了很久，被网上的document.write误导了一个星期，根本不用document.write,直接用php的echo就完事了。嵌在js里的php代码用echo输出来就是js代码了，贴一段`

	elements:{
					nodes: [
                        <?php echo "{ data: { id: 'j', name: '".$_GET['name']."'} }," ?>
                        <?php for($i=0;$i<$s;$i++) {echo"{data:{id: '$i', name: '$arr5[$i]',href:'http://' } },";}
                        echo "{data:{id: '$s' , name: '$arr5[$s]', weight: 5}}";?>
								],
					edges: [
                        <?php for($i=0;$i<$s;$i++) {echo"{ data:{ source: 'j', target: '$i', weight: 1,id:'j.$i.'}},";}
                        echo "{ data: { source: 'j', target:'$s', weight: 1} }"; ?>
								]
				},`

这个里面的href就是节点跳转的链接。官网上没有直接给出这个节点的属性，我是在demo里面查出来的。剩下的参数和属性官网上基本都有，可以自己试着玩。
这篇博客只能帮助初识cytoscape.js，再难的要自己去学了。若有错误，望斧正。