安科网

Cayley图数据库的可视化（Visualize）

bluetears

bluetears

2019-07-01

关注 关注

引入

  在文章Cayley图数据库的简介及使用中，我们已经了解了Cayley图数据库的安装、数据导入以及进行查询等。
  Cayley图数据库是Google开发的开源图数据库，虽然功能还没有Neo4J来得那么强大，但也有很多新的功能等待着我们去探索。本文将继续上篇文章的旅程，给读者介绍如何在Cayley图数据库中实现查询结果的可视化。
  下面，让我们一起来探究Cayley的奥秘吧~

查询结果可视化

  Cayley图数据库的查询语句的参考网址为：https://github.com/cayleygraph/cayley/blob/master/docs/GizmoAPI.md 。 若想实现查询结果的可视化，则需要使用Tag()函数，返回的结果样式应当如下：

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

即返回的结果中对节点会打上Tag，source为来源，颜色为蓝色，target为目的地，颜色为橙色。
  我们使用的数据仍来自文章Cayley图数据库的简介及使用 。 首先导入数据：

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

接着启动查询语句的web界面：

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

在浏览器中输入网址：http://localhost:64210 ，选择Visualize，

Cayley图数据库的可视化（Visualize）

输入命令：

g.V('<沈腾>').Tag("source").Out('<ACT_IN>').Tag("target").All();

就能能到关系图的可视化结果了，如下：

Cayley图数据库的可视化（Visualize）

  接着我们来查看某个实体的所有属性及属性值，输入的命令如下：

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]);
}

出来的图如下：

Cayley图数据库的可视化（Visualize）

这样我们就实现了Cayley图数据库的可视化，但是效果一般，而且不支持对边赋值，因此无法在边上显示关系。

利用D3.js实现可视化展示

  利用D3.js，我们可以把查询到的结果，自己来画关系图。笔者主要参考的项目的Github地址为： https://github.com/ownthink/KG-View/blob/master/index.html 。我们只需要将查询到的结果复制粘贴到该HTML文件中即可。还是以《流浪地球》的所有属性及属性值为例，查询的命令如下：

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]);
}

返回的结果如下：

{
    "result": [
        {
            "rela": "<ISA>",
            "source": "<流浪地球>",
            "target": "<Movie>",
            "type": "resolved"
        },
        {
            "rela": "<rank>",
            "source": "<流浪地球>",
            "target": "2",
            "type": "resolved"
        },
        {
            "rela": "<src>",
            "source": "<流浪地球>",
            "target": "/item/%E6%B5%81%E6%B5%AA%E5%9C%B0%E7%90%83",
            "type": "resolved"
        },
        {
            "rela": "<box_office>",
            "source": "<流浪地球>",
            "target": "40.83亿",
            "type": "resolved"
        },
        {
            "rela": "<avg_price>",
            "source": "<流浪地球>",
            "target": "46",
            "type": "resolved"
        },
        {
            "rela": "<avg_people>",
            "source": "<流浪地球>",
            "target": "50",
            "type": "resolved"
        },
        {
            "rela": "<begin_date>",
            "source": "<流浪地球>",
            "target": "2019.02.05",
            "type": "resolved"
        }
    ]
}

将result的结果数组复制粘贴至index.html文件，内容如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>.link {  fill: none;  stroke: #666;  stroke-width: 1.5px;}#licensing {  fill: green;}.link.licensing {  stroke: green;}.link.resolved {  stroke-dasharray: 0,2 1;}circle {  fill: #ccc;  stroke: #333;  stroke-width: 1.5px;}text {  font: 12px Microsoft YaHei;  pointer-events: none;  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;}.linetext {    font-size: 12px Microsoft YaHei;}</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var links = 
[
    {
      "rela": "<ISA>",
      "source": "<流浪地球>",
      "target": "<Movie>",
      "type": "resolved"
    },
    {
      "rela": "<rank>",
      "source": "<流浪地球>",
      "target": "2",
      "type": "resolved"
    },
    {
      "rela": "<src>",
      "source": "<流浪地球>",
      "target": "/item/%E6%B5%81%E6%B5%AA%E5%9C%B0%E7%90%83",
      "type": "resolved"
    },
    {
      "rela": "<box_office>",
      "source": "<流浪地球>",
      "target": "40.83亿",
      "type": "resolved"
    },
    {
      "rela": "<avg_price>",
      "source": "<流浪地球>",
      "target": "46",
      "type": "resolved"
    },
    {
      "rela": "<avg_people>",
      "source": "<流浪地球>",
      "target": "50",
      "type": "resolved"
    },
    {
      "rela": "<begin_date>",
      "source": "<流浪地球>",
      "target": "2019.02.05",
      "type": "resolved"
    }
];
var nodes = {};
links.forEach(function(link)
{
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 1920, height = 1080;
var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(180)
    .charge(-1500)
    .on("tick", tick)
    .start();
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var marker=
    svg.append("marker")
    .attr("id", "resolved")
    .attr("markerUnits","userSpaceOnUse")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",32)
    .attr("refY", -1)
    .attr("markerWidth", 12)
    .attr("markerHeight", 12)
    .attr("orient", "auto")
    .attr("stroke-width",2)
    .append("path")
    .attr("d", "M0,-5L10,0L0,5")
    .attr('fill','#000000');
var edges_line = svg.selectAll(".edgepath")
    .data(force.links())
    .enter()
    .append("path")
    .attr({
          'd': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
          'class':'edgepath',
          'id':function(d,i) {return 'edgepath'+i;}})
    .style("stroke",function(d){
         var lineColor;
         lineColor="#B43232";
         return lineColor;
     })
    .style("pointer-events", "none")
    .style("stroke-width",0.5)
    .attr("marker-end", "url(#resolved)" );
var edges_text = svg.append("g").selectAll(".edgelabel")
.data(force.links())
.enter()
.append("text")
.style("pointer-events", "none")
.attr({  'class':'edgelabel',
               'id':function(d,i){return 'edgepath'+i;},
               'dx':80,
               'dy':0
               });
edges_text.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d){return d.rela;});
var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter().append("circle")
    .style("fill",function(node){
        var color;
        var link=links[node.index];
        color="#F9EBF9";
        return color;
    })
    .style('stroke',function(node){ 
        var color;
        var link=links[node.index];
        color="#A254A2";
        return color;
    })
    .attr("r", 28)
    .on("click",function(node)
    {
        edges_line.style("stroke-width",function(line){
            console.log(line);
            if(line.source.name==node.name || line.target.name==node.name){
                return 4;
            }else{
                return 0.5;
            }
        });
    })
    .call(force.drag);
var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter()
    .append("text")
    .attr("dy", ".35em")  
    .attr("text-anchor", "middle")
    .style('fill',function(node){
        var color;
        var link=links[node.index];
        color="#A254A2";
        return color;
    }).attr('x',function(d){
        var re_en = /[a-zA-Z]+/g;
        if(d.name.match(re_en)){
             d3.select(this).append('tspan')
             .attr('x',0)
             .attr('y',2)
             .text(function(){return d.name;});
        }
        
        else if(d.name.length<=4){
             d3.select(this).append('tspan')
            .attr('x',0)
            .attr('y',2)
            .text(function(){return d.name;});
        }else{
            var top=d.name.substring(0,4);
            var bot=d.name.substring(4,d.name.length);
            d3.select(this).text(function(){return '';});
            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',-7)
                .text(function(){return top;});
            d3.select(this).append('tspan')
                .attr('x',0)
                .attr('y',10)
                .text(function(){return bot;});
        }
    });
function tick() {
  circle.attr("transform", transform1);
  text.attr("transform", transform2);
  edges_line.attr('d', function(d) { 
      var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
      return path;
  });  
    
  edges_text.attr('transform',function(d,i){
        if (d.target.x<d.source.x){
            bbox = this.getBBox();
            rx = bbox.x+bbox.width/2;
            ry = bbox.y+bbox.height/2;
            return 'rotate(180 '+rx+' '+ry+')';
        }
        else {
            return 'rotate(0)';
        }
   });
}
function linkArc(d) {
  return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
}
function transform1(d) {
  return "translate(" + d.x + "," + d.y + ")";
}
function transform2(d) {
      return "translate(" + (d.x) + "," + d.y + ")";
}
</script>

在浏览器中打开，效果如下：

Cayley图数据库的可视化（Visualize）

这个绘图的效果会比Cayley自带的效果好一些，但功能还是有限。

总结

  网上关于Cayley的相关资料比较少，基本只有官方文档和社区作为参考。本文所讲述的内容如有不足之处，还请读者多多指教~另外，关于Cayley的可视化，如读者有更好地办法实现，也欢迎告知笔者~

注意：不妨了解下笔者的微信公众号： Python爬虫与算法（微信号为：easy_web_scrape）， 欢迎大家关注~

图数据库 可视化 target

bluetears

bluetears

0 关注 2 粉丝 0 动态

关注 关注

相关推荐

设计数据库 ER 图太麻烦？不妨试试这两款工具，自动生成数据库 ER 图！！！

然后上周又接到新需求，马不停蹄进入开发。这不有一天状态还不好，迷迷糊糊中改了一天 Bug，又写了一天 Bug。自产自销，问题有点大，后面几天一直填自己的挖的坑，那叫一个酸爽。上面写这么多，本周没啥时间写技术文，那就写点轻松的，分享一个日常比较实用的功能『自

景泽元的编程 2020-04-30

centos 安装neo4j图形数据库

下一代图形数据库建立了无限的规模和开发的灵活性，工欲善其事必先利其器，那么接下来我们就来看一下如何在centos上安装neo4j数据库。粒度安全——使用Neo4j 4.0，开发人员和管理员现在可以更好地控制数据访问的安全性和隐私性。操作敏捷性——Neo4j

景泽元的编程 2020-03-23

TigerGraph免费开放企业级版本授权全力支持疫情防控

新型冠状病毒肺炎疫情自发生以来，一直牵动着全国人民的心。全球领先的可扩展企业级图数据库TigerGraph宣布，利用强大的企业级图数据库产品，免费开放企业级版本授权，为政府机构、公共事业和科研机构赋能，帮助实现更加科学和有效的研究和决策，减轻疫情对社会和经

arsaycode 2020-02-14

图形数据库neo4j

优势在创建节点的时候就已经把关系给建立起来，避免了在复杂查询场景下的处理由于底层直接以图的形式存储节点和关系，在查询的时候可以使时间复杂度保持在常数级别。简单使用CREATE：关键字，创建节点 CREATE ,a为节点名称，b 为节点类型

whyname 2019-12-31

带你部署单机oracle数据库，超详细带图解说

[root@heima ~]# yum clean all[root@heima ~]# yum makecache1.2 安装所需依赖包[root@heima ~]# yum -y install compat-libstdc++-33 libaio-d

末点 2019-12-10

5个最佳的开源图数据库

在过去的几年中，图数据库变得越来越流行，因为它们为表述数据提供了极大的灵活性。大多数图数据库都是用Java编写的，但是在Python，.NET，PHP和C ++中有一系列好的解决方案。Neo4j的Graph平台经过优化，可以存储，映射，分析和遍历连接的数据

ApachePHPMySQL 2019-11-25

图数据库 Nebula Graph 在 HBaseCon Asia2019 的分享实录

Nebula Graph：一个开源的分布式图数据库。作为唯一能够存储万亿个带属性的节点和边的在线图数据库，Nebula Graph 不仅能够在高并发场景下满足毫秒级的低时延查询要求，还能够实现服务高可用且保障数据安全性。HBaseCon Asia2019

hanfox 2019-11-04

聊聊图数据库和图数据库的小知识

这些关系允许直接将存储区中的数据链接在一起，并且在许多情况下，可以通过一个操作进行检索。查询图数据库中的关系很快，因为它们永久存储在数据库本身中。可以使用图数据库直观地显示关系，使其对于高度互连的数据非常有用。图数据库是一种非关系型数据库，以解决现有关系数

zhanbuquan 2019-11-03

图数据库 Nebula Graph 的安装部署

Nebula Graph：一个开源的分布式图数据库。作为唯一能够存储万亿个带属性的节点和边的在线图数据库，Nebula Graph 不仅能够在高并发场景下满足毫秒级的低时延查询要求，还能够实现服务高可用且保障数据安全性。在存储层 Nebula Graph

heavstar 2019-09-08

众测图数据库 Nebula Graph | 捉虫计划已开启，这项有礼

Nebulan Graph 捉虫计划 是开源的分布式图数据库 —— Nebula 发起的「找 Bug」活动，旨在发动开源社区的力量共建图数据库 Nebula。作为唯一能够存储万亿个带属性的节点和边的在线图数据库，Nebula Graph 不仅能够在高并发场

yongyoumengxiang 2019-09-08

图数据库:dgraph 基础查询(二)

如果没有索引，不利于查询。# 此节重点介绍查询，具体事务后面介绍。大体上 就是 mutate 后 用commit 提交

xinluliu0 2019-09-08

图数据库：dgraph 简介(一)

Fast, Transactional, Distributed Graph Database.Dgraph是分布式，支持事务，快速的图形数据库。Dgraph的目标是提供谷歌生产水平的规模和吞吐量，具有足够低的延迟，可以提供超过数TB的结构化数据的实时用户

dockerhc 2019-09-08

图数据库 Nebula Graph 的数据模型和系统架构设计

Nebula Graph：一个开源的分布式图数据库。作为唯一能够存储万亿个带属性的节点和边的在线图数据库，Nebula Graph 不仅能够在高并发场景下满足毫秒级的低时延查询要求，还能够实现服务高可用且保障数据安全性。本篇主要介绍 Nebula Grap

AscaryBird 2019-09-06

linux环境搭建图数据库neo4j的讲解

Neo4j是一个高性能的图数据库， 在社交关系中经常用到。关于Neo4j的介绍，网上多的是， 故不再赘述。来简要说说安装：。drwxr-xr-x 11 ubuntu ubuntu 4096 Feb 1 18:21 neo4j-community-3.2

迷题 2019-04-03

分享一份珍藏多年的PG数据库部署架构图

概述PostgreSQL凭借友好的开源许可，商业、创新两大价值，以及四大能力，在企业级开源数据库市场份额节节攀升，并蝉联2017,2018全球权威数据库评测机构db-engine的年度数据库冠军。今天主要分享一下之前整理的PG常见的部署架构图，仅供参考。后

Rain 2019-07-10

在线数据库关系图设计工具 dbdiagram.io

前段时间，笔者在设计某个系统模块的时候，需要增加十几张表。dbdiagram.io是holistics.io这款商业产品的社区版。dbdiagram.io使用DSL语言，可以简单快速地创建数据库关系图。有时候我们需要在关系型数据库中设计一些表，以便实现我们

JavaWebHao 2019-07-01

Cayley图数据库的简介及使用

图数据库在如今数据库群雄逐鹿的时代中，非关系型数据库已经占据了半壁江山，而图数据库更是攻城略地，成为其中的佼佼者。相比于关系型数据库，图数据库更能胜任这方面的任务。图数据库现已涌现出许多出众的软件，比如笔者写过的文章Neo4j入门之中国电影票房排行浅析中的

heavstar 2019-07-01

图数据库项目DGraph的前世今生

翻译目的在于传递更多全球最新数据库领域相关信息，并不意味着腾讯云数据库产品团队赞同其观点或证实其内容的真实性。如果其他媒体、网站或其他任何形式的法律实体和个人使用，必须经过著作权人合法书面授权并自负全部法律责任。不得擅自使用腾讯云数据库团队的名义进行转载，

zhangdell 2019-07-01

元数据治理框架Atlas研究——JanusGraph图数据库对象关系映射

概要Atlas采用了分布式图数据库JanusGraph作为数据存储，目的在于用有向图灵活的存储、查询数据血缘关系。Atlas定义了一套atlas-graphdb-api，允许采用不同的图数据库引擎来实现api，便于切换底层存储。所以Atlas读写数据的过程

张亚京 2019-06-30

阿里云图数据库GraphDB上线，助力图数据处理

GraphDB简介GraphDB图数据库适用于存储，管理，查询复杂并且高度连接的数据，图库的结构特别适合发现大数据集下数据之间的共性和特性，特别善于释放蕴含在数据关系之间的巨大价值。GraphDB引擎本身并不额外收费，仅收取云hbase费用。如果使用得当，

数据库之扑朔迷离 2019-06-30
bluetears

bluetears

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号