摘要：本文將繼續(xù)上篇文章的旅程，給讀者介紹如何在圖數(shù)據(jù)庫(kù)中實(shí)現(xiàn)查詢(xún)結(jié)果的可視化。下面，讓我們一起來(lái)探究的奧秘吧查詢(xún)結(jié)果可視化圖數(shù)據(jù)庫(kù)的查詢(xún)語(yǔ)句的參考網(wǎng)址為。我們使用的數(shù)據(jù)仍來(lái)自文章圖數(shù)據(jù)庫(kù)的簡(jiǎn)介及使用。

??在文章Cayley圖數(shù)據(jù)庫(kù)的簡(jiǎn)介及使用中，我們已經(jīng)了解了Cayley圖數(shù)據(jù)庫(kù)的安裝、數(shù)據(jù)導(dǎo)入以及進(jìn)行查詢(xún)等。
??Cayley圖數(shù)據(jù)庫(kù)是Google開(kāi)發(fā)的開(kāi)源圖數(shù)據(jù)庫(kù)，雖然功能還沒(méi)有Neo4J來(lái)得那么強(qiáng)大，但也有很多新的功能等待著我們?nèi)ヌ剿?。本文將繼續(xù)上篇文章的旅程，給讀者介紹如何在Cayley圖數(shù)據(jù)庫(kù)中實(shí)現(xiàn)查詢(xún)結(jié)果的可視化。
??下面，讓我們一起來(lái)探究Cayley的奧秘吧~

??Cayley圖數(shù)據(jù)庫(kù)的查詢(xún)語(yǔ)句的參考網(wǎng)址為：https://github.com/cayleygraph/cayley/blob/master/docs/GizmoAPI.md 。 若想實(shí)現(xiàn)查詢(xún)結(jié)果的可視化，則需要使用Tag()函數(shù)，返回的結(jié)果樣式應(yīng)當(dāng)如下：

[
{
  "source": "node1",
  "target": "node2"
},
{
  "source": "node1",
  "target": "node3"
},
]

即返回的結(jié)果中對(duì)節(jié)點(diǎn)會(huì)打上Tag，source為來(lái)源，顏色為藍(lán)色，target為目的地，顏色為橙色。
??我們使用的數(shù)據(jù)仍來(lái)自文章Cayley圖數(shù)據(jù)庫(kù)的簡(jiǎn)介及使用 。 首先導(dǎo)入數(shù)據(jù)：

./cayley load -c cayley_example.yml -i data/China_Movie.nq

接著啟動(dòng)查詢(xún)語(yǔ)句的web界面：

./cayley http -i ./data/China_Movie.nq -d memstore --host=:64210

在瀏覽器中輸入網(wǎng)址：http://localhost:64210 ，選擇Visualize，

輸入命令：

g.V("<沈騰>").Tag("source").Out("").Tag("target").All();

就能能到關(guān)系圖的可視化結(jié)果了，如下：

??接著我們來(lái)查看某個(gè)實(shí)體的所有屬性及屬性值，輸入的命令如下：

var eq = "<流浪地球>";
var attrs = g.V(eq).OutPredicates().ToArray(); 

values = new Array();
for (i in attrs) {
    var value = g.V(eq).Out(attrs[i]).ToValue();
    values[i] = value;
}

var s = new Array();


for (i in attrs) {
  var key_val_json = new Object();
  key_val_json["id"] = values[i];
  key_val_json["source"] = eq;
  key_val_json["target"]= attrs[i]+":"+values[i];
  s[i] = key_val_json;
}

for (i =0; i< s.length; i++) {
    g.Emit(s[i]);
}

出來(lái)的圖如下：

這樣我們就實(shí)現(xiàn)了Cayley圖數(shù)據(jù)庫(kù)的可視化，但是效果一般，而且不支持對(duì)邊賦值，因此無(wú)法在邊上顯示關(guān)系。

??利用D3.js，我們可以把查詢(xún)到的結(jié)果，自己來(lái)畫(huà)關(guān)系圖。筆者主要參考的項(xiàng)目的Github地址為： https://github.com/ownthink/KG-View/blob/master/index.html 。我們只需要將查詢(xún)到的結(jié)果復(fù)制粘貼到該HTML文件中即可。還是以《流浪地球》的所有屬性及屬性值為例，查詢(xún)的命令如下：

var eq = "<流浪地球>";
var attrs = g.V(eq).OutPredicates().ToArray(); 

values = new Array();
for (i in attrs) {
    var value = g.V(eq).Out(attrs[i]).ToValue();
    values[i] = value;
}

var s = new Array();

for (i in attrs) {
  var key_val_json = new Object();
  key_val_json["source"] = eq;
  key_val_json["rela"] = attrs[i];
  key_val_json["target"] = values[i];
  key_val_json["type"] = "resolved";
  s[i] = key_val_json;
}

for (i =0; i< s.length; i++) {
    g.Emit(s[i]);
}

返回的結(jié)果如下：

{
    "result": [
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "2",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "/item/%E6%B5%81%E6%B5%AA%E5%9C%B0%E7%90%83",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "40.83億",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "46",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "50",
            "type": "resolved"
        },
        {
            "rela": "",
            "source": "<流浪地球>",
            "target": "2019.02.05",
            "type": "resolved"
        }
    ]
}

將result的結(jié)果數(shù)組復(fù)制粘貼至index.html文件，內(nèi)容如下：

在瀏覽器中打開(kāi)，效果如下：

這個(gè)繪圖的效果會(huì)比Cayley自帶的效果好一些，但功能還是有限。

??網(wǎng)上關(guān)于Cayley的相關(guān)資料比較少，基本只有官方文檔和社區(qū)作為參考。本文所講述的內(nèi)容如有不足之處，還請(qǐng)讀者多多指教~另外，關(guān)于Cayley的可視化，如讀者有更好地辦法實(shí)現(xiàn)，也歡迎告知筆者~

注意：不妨了解下筆者的微信公眾號(hào)： Python爬蟲(chóng)與算法（微信號(hào)為：easy_web_scrape）， 歡迎大家關(guān)注~