(Desenvolvedores Star Python para melhorar as habilidades em Python)
Autor: jclian (este artigo da Submissão)
Introduzir
No artigo Introdução e uso do Cayley Graph Database , aprendemos sobre a instalação, importação de dados e consulta do Cayley Graph Database.
O banco de dados gráfico Cayley é um banco de dados gráfico de código aberto desenvolvido pelo Google. Embora a função não seja tão poderosa quanto o Neo4J, existem muitas funções novas esperando para explorarmos. Este artigo continuará a jornada do artigo anterior e mostrará aos leitores como visualizar os resultados da consulta no banco de dados gráfico de Cayley.
A seguir, vamos explorar o mistério de Cayley juntos ~
Visualização dos resultados da consulta
O site de referência para a declaração de consulta do banco de dados gráfico Cayley é: https://github.com/cayleygraph/cayley/blob/master/docs/GizmoAPI.md. Se quiser visualizar os resultados da consulta, você precisa usar a função Tag (), e o estilo do resultado retornado deve ser o seguinte:
[
{
"source": "node1",
"target": "node2"
},
{
"source": "node1",
"target": "node3"
},
]
Ou seja, o nó será marcado no resultado retornado, a origem é a origem, a cor é azul e o destino é o destino, a cor é laranja.
Os dados que usamos são ainda do artigo Introdução e uso do banco de dados gráfico de Cayley . Primeiro importe os dados:
./cayley load -c cayley_example.yml -i data/China_Movie.nq
Em seguida, inicie a interface da web da instrução de consulta:
./cayley http -i ./data/China_Movie.nq -d memstore --host=:64210
Digite a URL no navegador: http: // localhost: 64210, selecione Visualizar,
insira o comando:
g.V('<沈腾>').Tag("source").Out('<ACT_IN>').Tag("target").All();
Você pode obter os resultados da visualização do diagrama de relacionamento da seguinte maneira:
Em seguida, olhamos para todos os atributos e valores de atributos de uma entidade, o comando de entrada é o seguinte:
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]);
}
A figura que surge é a seguinte:
Desta forma, realizamos a visualização do banco de dados de grafos de Cayley, mas o efeito é médio, e a atribuição de arestas não é suportada, portanto a relação não pode ser exibida nas arestas.
Use D3.js para obter uma exibição visual
Usando D3.js, podemos desenhar o diagrama de relacionamento por nós mesmos com base nos resultados da consulta. O endereço Github do projeto ao qual o autor se refere principalmente é: https://github.com/ownthink/KG-View/blob/master/index.html. Precisamos apenas copiar e colar os resultados da consulta no arquivo HTML. Tomando todos os atributos e valores de atributo de "Wandering Earth" como exemplo, o comando de consulta é o seguinte:
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]);
}
Os resultados retornados são os seguintes:
{
"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"
}
]
}
Copie e cole a matriz de resultado do resultado no arquivo index.html, o conteúdo é o seguinte:
<!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>
Abra no navegador, o efeito é o seguinte:
O efeito deste desenho será melhor do que o efeito embutido de Cayley, mas a função ainda é limitada.
Resumindo
Há relativamente pouca informação sobre Cayley na Internet e, basicamente, apenas documentos oficiais e comunidades são usados como referências. Se houver alguma deficiência no conteúdo descrito neste artigo, os leitores também podem aconselhar. Além disso, sobre a visualização de Cayley, se o leitor tiver uma maneira melhor de obtê-la, também gostaria de informar o autor ~
[Autor deste artigo]
jclian: Trabalho em Python há mais de dois anos. Sou um entusiasta de Python. Gosto de algoritmos e adoro compartilhar. Espero fazer mais amigos que pensam da mesma forma e avançar na estrada de aprender Python juntos!
Leitura recomendada
(Clique no título para pular para ler)
Acha que este artigo é útil para você? Por favor, compartilhe com mais pessoas
Preste atenção ao "Desenvolvedor Python" estrelado para melhorar as habilidades do Python
Bom artigo, estou lendo ❤️