vis.js 简单示例：边缘不显示

Question

我正在研究一个基于 vis.js 的简单网络可视化示例。我有 5 个节点和 6 个边，我将它们存储在 JSON 文件中。边缘没有显示，而在 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);

浏览器中的输出：

如果您能提示我我做错了什么，我会非常高兴。

Answer 1

OP在评论中回答：

vis.js 文档提到可以导入 gephi 导出的 JSON，这是我的出发点。这些边缘由“源”和“目标”指示。 Vis.js 需要“from”和“to”关键字。如果能更好地记录这一点就好了

Answer 2

vis 需要这种格式的数据：

var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);

// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);

Answer 3

如果您正在尝试可视化 Python Networkx 图（默认情况下以“源”和“目标”形式输出边，如此处所述），您可以执行以下操作：

nx.node_link_data(G, source="from", target="to")

现在“源”将分别替换为“from”，“目标”将分别替换为“to”。

vis.js 简单示例：边缘不显示

问题描述投票：0回答：3

3个回答

最新问题

vis.js 简单示例：边缘不显示

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3