初識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，再難的要自己去學了。若有錯誤，望斧正。