3

私は vis.js に基づく単純なネットワーク視覚化の例に取り組んでいます。JSON ファイルに保存する 5 つのノードと 6 つのエッジがあります。vis.js ホームページにある例ではエッジが表示されますが、エッジは表示されません。コード：

HTML ファイル:

<!doctype html>
<html>
<head>
  <title>Cryring Topology</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="vis.js"></script>
  <link href="vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 1200px;
      height:1200px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

    <p>
      Visualization nof the Cryring Topology
    </p>

    <div id="mynetwork"></div>
    <!-- this adds an invisible <div> element to the document to hold the JSON data -->
    <div id="networkJSON-results" class="results" style="display:none"></div>
    <script src="graphPlotVis.js" type="text/javascript"></script>
</body>

JSON ファイル:

{"nodes":[
    {"id":"a", "label":"a"},
    {"id":"b", "label":"b"},
    {"id":"c", "label":"c"},
    {"id":"d", "label":"d"},
    {"id":"e", "label":"e"},
    {"id":"f", "label":"f"}
],
"edges":[
    {"source":"a","target":"b"},
    {"source":"b","target":"d"},
    {"source":"a","target":"c"},
    {"source":"c","target":"d"},
    {"source":"d","target":"e"},
    {"source":"e","target":"a"},
    {"source":"f","target":"c"}
    ]
}

JAVASCRIPT ファイル:

    $.ajax({
        async: false,
        url: 'cryringTopo.json',
        dataType: "json",
        success: function(data) {
        $('#networkJSON-results').html(JSON.stringify(data)); 
        }
    });

    var gephiJsonDOM = document.getElementById('networkJSON-results');

    if (gephiJsonDOM.firstChild == null) {
        window.alert('Error loading network file.')
    }

    var gephiJSON = JSON.parse(gephiJsonDOM.firstChild.data);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: gephiJSON.nodes,
    edges: gephiJSON.edges
  };

  var options = {};
  var network = new vis.Network(container, data, options);

ブラウザでの出力: ここに画像の説明を入力

私が間違っていることのヒントがあれば、とてもうれしいです。

4

2 に答える 2

1

コメントでOPが回答：

vis.js のドキュメントには、私の出発点である、gephi でエクスポートされた JSON をインポートできることが記載されています。エッジは「ソース」と「ターゲット」で示されます。Vis.js には、"from" および "to" キーワードが必要です。これをもう少しうまく文書化するといいでしょう

于 2015-12-15T19:42:26.713 に答える