前端數據可視化之 --- （一）億級關係圖

前言

在這以前，提起數據可視化，我都是能用echarts儘可能用echarts，特效很棒並且用起來簡單，粘貼一個option改個data就能生成很酷炫的報表，可是真正走向數據可視化領域以後，仍是會發現echarts有些不足，並且作大數據分析的企業全都依靠使用echarts的話，那麼大家的系統在表現上就已經輸了。
如今來看的話，大數據分析是互聯網發展必然的產物，因此掌握數據可視化工具的前端工程師在將來會是最基本的要求，然而在那個時候你還僅僅會使用某chart，那麼你自身的競爭力在哪。
最終實現效果：https://yzbaoo.github.io/cyto...

cytoscape

看了上面的需求你會選擇用什麼庫實現? echarts應該是實現不了了(也多是我對echarts的屬性研究不深)，D3？(D3是確定能夠的了)，與其用D3從零開始爲何不找到現有的開源的專門作關係圖的庫，來實現它，百度了半天也沒搜出個一支半截，最終仍是看了某查網，發現它們引入了一個叫cytoscape.js的文件，百度了一下（官網：http://js.cytoscape.org/）

描述

Cytoscape.js is a fully featured graph theory library. Do you need to
model and/or visualise relational data, like biological data or social
networks? If so, Cytoscape.js is just what you need.

Cytoscape.js contains a graph theory model and an optional renderer to
display interactive graphs. This library was designed to make it as
easy as possible for programmers and scientists to use graph theory in
their apps, whether it's for server-side analysis in a Node.js app or
for a rich user interface.

這是文檔給出的描述，說的很官方，大概意思就是若是你想要「關係」關係圖的話你可使用它，包括分子圖、社交網絡圖一系列想要表達關係的圖，而且提供能夠用JS原生方法添加交互的API。ok你的關係圖作的很牛逼就夠了，這正是咱們想要的。使用方法很簡單，一個div用於盛裝畫好的圖，先引jquery，再引Cytoscape.js，而後就能夠開始寫你的代碼了，還支持使用npm安裝。

demo

代碼：https://github.com/yzbaoo/cyt...
上來，調用cytoscape方法，參數主要包括：

var cy = cytoscape({
    container: document.getElementById('cy'),
    style:[
        {
            selector:'node',//點的樣式，同理還有邊的"edge",也能夠新增一個類名，而後在事件裏面add和remove來改變點和邊的樣式
            style:{}
        }
    ],
    elements:{//圖數據
        node:[],
        edges:[]
    },
    layout:{//包含一些設置圖佈局的屬性
        name: 'breadthfirst',//用哪一種方式排列，可選：breadthfirst(廣度優先)、cose(縫製，亂交)、preset(預設)、circle(圓形)、grid(矩形)
        animate:true,//出來動畫
        ...
    }
})
//添加交互事件
//點：
cy.on("mouseover", "node", function (a) {
    $('#cy').css('cursor', 'move');
    let c = a.target;
    c.addClass("nodeHover");
    cy.collection("edge").removeClass("edgeActive");
    c.neighborhood("edge").addClass("edgeActive");//鼠標通過某節點，與此節點有關的變高亮顯示
    //c.neighborhood("edge")表示：跟當前節點有關係的邊
})
cy.on("mouseout", "node", function (a) {})
cy.on("click", "node", function (a) {})
cy.on("vmousedown", "node", function (a) { //監聽鼠標左鍵按下})
cy.on("tapend", "node", function (a) { //監聽鼠標左鍵釋放})
//線：
//同理線的事件將‘node’換成‘edge’就好了

這裏我的感受，有了.neighborhood("node/edge")方法，就能夠吃遍天了，基本的需求要麼就是target自身添加一些樣式，要麼就是neighborhood（鄰居）添加一些樣式了，除了target就是neighborhood了嘛，他倆就已經能夠表示所有。

問題

在react項目中使用，雖然官方支持npm安裝，也有react cytoscape包，可是使用方法仍是很雞肋，以下：

render(){
    return(
        <ReactCytoscape 
        containerID='cy'
        elements={this.getElements()}
        style={this.cyStyle()}
        cyRef={(cy) => {this.cyRef(cy)}}
        cytoscapeOptions={{maxZoom:2.5}}
        layout={layout}
        />
    )
}
...
//雞肋在此
cyRef = (cy) => {
    cy.on("mouseover","node",function(a){
        $('#cy').css('curser','move');
        let c = a.target;
        cy.collection("edge").removeClass("edgeActive");
        c.neighborhood("edge").addClass("edgeActive");
    })
    
}

在cyRef 方法中，仍是要像原生同樣操做實際DOM，這彷佛有些不符合react的代碼規範和設計理念。由於目前國內使用cytoscape的不多，論壇上也沒有多少資源，期待你們在使用以後能回到此處在作交流，我遇到的這些問題你是否也遇到了，如何解決的咱們能夠作一些探討。

交流

此外，大家在作數據可視化的時候使用的是什麼庫，都是D3嗎？仍是svg去畫，仍是公司內有非開源的圖表庫？歡迎加入前端可視化技術羣 羣二維碼7天內有效。