ケイリーグラフデータベースの視覚化（視覚化）

その他 2020-10-28 06:08:44 訪問数: null

（Pythonスキルを向上させるためのスターPython開発者）

著者：jclian（提出物からのこの記事）

導入する

Cayley Graph Databaseの紹介と使用の記事では、Cayley Graph Databaseのインストール、データのインポート、およびクエリについて学習しました。

Cayleyグラフデータベースは、Googleが開発したオープンソースのグラフデータベースです。この機能はNeo4Jほど強力ではありませんが、多くの新しい機能が検討されるのを待っています。この記事では、前の記事の旅を続け、Cayleyグラフデータベースでクエリ結果を視覚化する方法を読者に示します。 

次に、ケイリーの謎を一緒に探りましょう〜

クエリ結果の視覚化

  

CayleyグラフデータベースのクエリステートメントのリファレンスWebサイトは、https：//github.com/cayleygraph/cayley/blob/master/docs/GizmoAPI.mdです。クエリ結果を視覚化する場合は、Tag（）関数を使用する必要があり、返される結果スタイルは次のようになります。

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

つまり、ノードは返された結果のタグでタグ付けされ、ソースはソース、色は青、ターゲットは宛先、色はオレンジです。

私たちが使用するデータは、Cayley GraphDatabaseの紹介と使用の記事からのもの です。最初にデータをインポートします。

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

次に、クエリステートメントのWebインターフェイスを開始します。

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

ブラウザにURLを入力します：http：// localhost：64210、[視覚化]を選択し、

640？wx_fmt = png
視覚化する

次のコマンドを入力します。

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

次のように、関係図の視覚化結果を取得できます。

640？wx_fmt = png

次に、エンティティのすべての属性と属性値を確認します。入力コマンドは次のとおりです。

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

出てくる図は次のとおりです。

640？wx_fmt = png

このようにして、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"
        }
    ]
}

結果の結果配列をコピーして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>

ブラウザで開くと、効果は次のとおりです。

640？wx_fmt = png
D3.jsレンダリング

この描画の効果は、ケイリーの組み込み効果よりも優れていますが、機能はまだ制限されています。

総括する

  

インターネット上のケイリーに関する情報は比較的少なく、基本的には公式の文書とコミュニティのみが参照として使用されます。この記事で説明されている内容に欠陥がある場合は、読者もアドバイスを歓迎します。また、ケイリーの視覚化について、読者がそれを達成するためのより良い方法がある場合は、私に知らせてください〜

[この記事の著者]

jclian：私は2年以上Pythonに携わっています。私はPythonの愛好家です。アルゴリズムが好きで、共有するのが大好きです。もっと志を同じくする友達を作り、一緒にPythonを学ぶ道をさらに進んでいきたいと思っています。

この記事はあなたに役立つと思いますか？もっと多くの人と共有してください

Pythonスキルを向上させるために主演する「PythonDeveloper」に注意してください

640？wx_fmt = png

良い記事、私は❤️を読んでいます

おすすめ

転載: blog.csdn.net/iodjSVf8U1J7KYc/article/details/100680930
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com