sigma.js - sigma.js不读取JSON-6ren

sigma.js - sigma.js不读取JSON

转载作者：行者123 更新时间：2023-12-04 04:53:22

28

4

我有这个页面

<html>
<head>
<style type="text/css">
  #container {
    max-width: 800px;
    height: 800px;
    margin: auto;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.min.js"></script>
<script src="plugins/sigma.parsers.json.min.js"></script>
<script>
  sigma.parsers.json('graph.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148'
    }
  });
</script>
</body>
</html>

可以很好地加载 here及以下提供的第一个示例图

{
  "nodes": [
    {
      "id": "n0",
      "label": "A node",
      "x": 0,
      "y": 0,
      "size": 3
    },
    {
      "id": "n1",
      "label": "Another node",
      "x": 3,
      "y": 1,
      "size": 2
    },
    {
      "id": "n2",
      "label": "And a last one",
      "x": 1,
      "y": 3,
      "size": 1
    }
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n0",
      "target": "n1"
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n2"
    },
    {
      "id": "e2",
      "source": "n2",
      "target": "n0"
    }
  ]
}

但是当我尝试加载JSON时

{"nodes":[ {
 "id": "chr1",
"label": "Bob",
"size":   8.75 
},
{
 "id": "chr10",
"label": "Alice",
"size":  14.75 
} ],"edges":[ {
 "id": "1",
"source": "chr1",
"target": "chr10" 
} ]}

我看不到它。 JSON结构对我来说似乎完全相同...

最佳答案

您的JSON不会显示在Sigma中，因为默认情况下，Sigma的解析器需要节点的X和Y坐标。

您可以做的是将X和Y坐标添加到JSON文件中，或者如果您不想这样做(例如，可能要对它们应用ForceAtlas布局)，则可以执行以下操作:

    // these are just some preliminary settings 
    var g = {
        nodes: [],
        edges: []
    };

   // Create new Sigma instance in graph-container div (use your div name here) 
   s = new sigma({
   graph: g,
   container: 'graph-container',
   renderer: {
    container: document.getElementById('graph-container'),
    type: 'canvas'
   },
   settings: {
    minNodeSize: 8,
    maxNodeSize: 16
   }
   });

   // first you load a json with (important!) s parameter to refer to the sigma instance   

   sigma.parsers.json(
        '/data/your-jsonfile.json',
        s,
        function() {
            // this below adds x, y attributes as well as size = degree of the node 
            var i,
                    nodes = s.graph.nodes(),
                    len = nodes.length;

            for (i = 0; i < len; i++) {
                nodes[i].x = Math.random();
                nodes[i].y = Math.random();
                nodes[i].size = s.graph.degree(nodes[i].id);
                nodes[i].color = nodes[i].center ? '#333' : '#666';
            }

            // Refresh the display:
            s.refresh();

            // ForceAtlas Layout
            s.startForceAtlas2();
        }
   );

您还需要在脚本中包含ForceAtlas2插件。

如果您不想使用ForceAtlas而只想要随机布局，请删除s.startForceAtlas2();。上面的字符串。

关于sigma.js - sigma.js不读取JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21795125/

28

4

0

文章推荐： sapui5 - 如何在运行时查找 SAPUI5 元素的对象类型

文章推荐： apache-kafka - Kafka 流过滤 : broker or consumer side?

文章推荐： architecture - 拥有仅包含静态方法的模型有意义吗？

sigma.js - sigma.js不读取JSON
我有这个页面 #container { max-width: 800px; height: 800px; margin: auto; } sig
sigma.js - 如何增加 sigma js 中边缘箭头的大小？
如何增加 sigmajs 中边缘箭头的大小？我有这段代码。 s = new sigma({ graph: g, container: 'network-graph', renderer: {
sigma.js - 如何在 sigma.js 中进行边缘悬停？
我已经使用了 enableEdgeHovering: true 但悬停仍然不起作用？我只想在悬停时显示标签，否则隐藏边缘标签最佳答案 s = new sigma({ graph:
javascript - 如何将预先存在的 sigma 实例传递给 sigma.parsers.gexf
在我的网站上，我通过使用 sigma.parsers.gexf 定位容器和将图形加载到其中。 Javascript 代码与您在 sigma.js website 中找到的相同: sigma.
Java Sigma 方程求解 sigma(i=1 to k)((-1)^i+1)(i)(i+1) 长值超时
Getting timedout error while calculating the value of sigma notation sigma(i=1 to k)((-1)^i+1)(i)(i+
C、sigma 的时间复杂度？
我如何找到以下代码的时间复杂度: (抱歉添加图片，一旦我可以访问笔记本电脑，我将重新编辑我的问题) 到目前为止我做了什么: 第一个循环迭代 n 次，第二次 i 次和第三次 log(i*j) 次，所以简
haskell - 如何使用单例库中的依赖对类型 Sigma？
依赖对如何输入 Sigma来自singletons使用库吗？假设存在以下类型索引列表和复制函数: data Vect :: Nat -> Type -> Type where VNil :: V
javascript - Sigma.js学习与实例
我想发现 sigma.js，这样我就可以在项目中使用它。我已经知道一点 d3 但通过在互联网上搜索人们提到 sigma 更适合图形，就我而言，例如在图形中数据库 sigma 可能更好。但我进行了搜索，
haskell - Sigma 中的限制类型
我有类型 X按种类索引 S具有适用于 X 的几个功能.例如，f转换 X S1至 X S2 (不过，在这个简化的例子中它不使用 X S1)。 {-# LANGUAGE DataKinds, GADTs,
java - 如何将幂函数添加到 sigma
我编写了这段代码来计算正除数的总和，并且所有值都必须是 a 的幂。例如: sigma(0,14) = 1^0 + 2^0 + 7^0 + 14^0 = 4; sigma(2,12) = 1^2 +
javascript - Sigma js无法加载外部gexf
从 https://github.com/jacomyal/sigma.js 下载 sigma.js zip尝试 gexf 文件的基本加载。不幸的是，html-load-external-gexf.h
label - Sigma JS - 显示边缘标签
我们如何在 Sigma.js 上显示边缘标签？我知道 show edge label in sigma.js . 但是代码尚未与主干版本合并。最佳答案现在可以使用 sigma 存储库中的新插件来
r - 计算多列均值和单列 sigma 的概率密度函数值
鉴于下面的示例数据 sampleDT ，其中包含 mean1 到 mean10 的均值和标准差 sd2 ，我将不胜感激任何帮助来创建一个函数: for each column of means mea
sum - 我怎样才能在胜利网格的页脚显示摘要而不让 Sigma 出现在页眉中？
我正在使用 Infragistics UltraWinGrid 并希望能够显示多个列的总和。我通过允许行摘要来实现它。然而，我只希望他们能够看到总和，而不是在标题中看到所有这些伴随着那个小 sigma
agile - 6 Sigma 质量管理和软件开发
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 5年前关闭。 Improve thi
javascript - sigma-js 的编码问题
如果我将 Gephi 图导出到 sigma-js并在本地加载它，一切都很完美，但是如果我将内容上传到http存储(即公共(public)dropbox或其他)，则ascii以外的字符将显示垃圾。我认
javascript - Sigma.js 过滤器问题
我使用 sigma.js 和 Angular js 来构建我的可视化 Web 应用程序。问题陈述:我以这样的方式编写代码，当过滤条件发生变化时，将触发过滤模块根据用户选择过滤掉节点(参见下面的代码)
coq - 证明 Sigma 类型上的相等性
我定义了一个 Sygma-Type，如下所示: { R : nat -> nat -> bool | Reflexive R } 我有两个元素 r1 r2 : { R : nat -> nat ->
javascript - sigma.js 中的自定义行为
我正在使用 sigma.js 来显示一个相当大的图表。当用户双击节点时，我希望相机放大所单击的节点 - 值得庆幸的是，这是开箱即用的。但是，我还希望在双击节点时重新绘制图形:我希望以所选节点为重心重新
haskell - 是否有可能在具有简单不一致公理的构造演算中提取 Sigma 的第二个元素？
它seems to be impossible提取构造微积分上西格玛的第二个元素。此外，似乎没有已知的、简单的方法可以在不失去一致性的情况下通过相关消除来扩展构造微积分。因此，如何利用一个简单但不一致

首页

博学

6Ren·AI

商城

sigma.js - sigma.js不读取JSON