个人中心
gpt4 book ai didi

javascript - vis.js 简单示例 : edges do not show

转载 作者：行者123 更新时间：2023-11-30 00:20:21 26 4
gpt4 key购买 nike

我正在研究一个基于 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);

在浏览器中输出: enter image description here

如果你能提示我我做错了什么，我会很高兴。

最佳答案

OP 在评论中回答:

the vis.js documentation mentions that one can import gephi-exported JSONs, which were my starting point. There edges are indicated by "source" and "target". Vis.js requires "from" and "to" keywords. It would be nice to document this a bit better

关于javascript - vis.js 简单示例 : edges do not show，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33392557/

26 4 0
文章推荐： java - 通过javascript将自动生成的数字插入数据库表
文章推荐： c# - 当用户通过 Navigation.PushAsync(tabbedPage) 打开时，更改 TabbedPage MainTitle 颜色
文章推荐： php - 在 foreach() 中回显数据库中的信息，仅显示第一行的信息
文章推荐： android - Google Assistant SDK 可以与我自己的应用集成吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com