程序员经验分享-hwhale

sigma.js 不读取 JSON

2023-11-26

我有这个页面

<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();上面的字符串。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

sigmajs

sigma.js 不读取 JSON 的相关文章

随机推荐

  • Shared_ptr 与 CComPtr

    我已经习惯了通过 COM 进行引用计数的概念 并且对 shared ptr 有点陌生 CComPtr 有几个不错的属性 但我在共享指针中找不到 我想知道防止滥用共享指针的模式是什么 AddRef Release 模式保证每个对象只有一个引用

  • Swift 2.0 日历组件错误

    您好 我在 swift 2 0 中收到此错误 无法使用类型为 NSCalendarUnit fromDate NSDate toDate NSDate 选项 nil 的参数列表调用 组件 var hoy dataFormatter stri

  • 如何读取包含转义引号的引用文本

    考虑以下逗号分隔的文件 为了简单起见 让它包含一行 I am quoted so can use comma inside it is not separator here but can t use escaped quote 如果您尝试

  • Spark：您可以在输出文件中包含分区列吗？

    我正在使用 Spark 将数据写入分区 给定一个包含两列的数据集 foo bar 如果我做df write mode overwrite format csv partitionBy foo save tmp output 我得到的输出是

  • NumberFormatException 错误（parseInt）

    希望这是一个非常简单的查询 但这让我摸不着头脑 我有一个字符串 它只是一个整数 然后我试图将该整数作为 int 取出 从表面上看这不应该是一个问题 this is how I create the string it s the playl

  • C++ 中三字母序列的用途？

    根据 C 03 标准 2 3 1 在进行任何其他处理之前 每次出现以下三个字符序列 三字符序列 之一时 都会被表 1 中指示的单个字符替换 trigraph replacement trigraph replacement trigraph

  • OpenCV 特征匹配多个对象

    如何在一张图像上找到一种类型的多个对象 我使用 ORB 特征查找器和强力匹配器 opencv 3 2 0 我的源代码 import numpy as np import cv2 from matplotlib import pyplot a

  • 错误：从 Ubuntu 终端运行 Java 程序期间发生 JNI 错误，请检查您的安装并重试

    我正在尝试通过 Ubuntu 终端运行一个用 Java 编写的简单客户端 服务器程序 不幸的是 我可以成功编译代码 但无法运行代码 服务器类代码 import java io IOException import java net Serv

  • 将字符转换为对应的虚拟键码

    目前 我正在使用该方法VkKeyScan在 Win32 API 中将字符转换为其虚拟键代码 但这似乎存在的问题是 当我传递小字母时 它工作正常 而当我传递大写字母时 它不会返回适当的键代码 类似地 对于 或 等特殊字符 我该怎么做呢 无论如

  • 将带有未知分隔符的 .csv 加载到 Pandas DataFrame 中

    我有许多 csv 文件要加载到 pandas 数据帧中 至少有两个分隔符逗号和分号 我不确定其余的分隔符 据我所知 可以使用设置分隔符 dataRaw pd read csv name sep and dataRaw pd read csv

  • 羽毛调用自定义API方法

    我用如下内容定义我的 api class MyFeathersApi feathersClient any accountsAPI any productsAPI any constructor app var port number ap

  • Flask-RESTful 如何添加资源并传递非全局数据

    In the Flask RESTful示例应用程序发布在这里 the TODOS集合是一个全局变量 之后Todo Resource已登记 api add resource Todo todos

  • Django：限制OnetoMany关系中的关系数量

    您好 我希望将外键关系限制为特定数量 假设一支篮球队只能有 12 个人 class Team models Model teamName models CharField max length 20 teamColors models Ch

  • Logger slf4j 使用 {} 格式化而不是字符串连接的优点

    使用有什么好处吗 而不是字符串连接 slf4j 的一个例子 logger debug Temperature set to Old temperature was t oldT 代替 logger debug Temperature set

  • 为什么在nodejs的for循环中let比var慢？

    我写了一个非常简单的基准测试 console time var for var i 0 i lt 100000000 i console timeEnd var console time let for let i 0 i lt 10000

  • 垂直和水平中心图像

    我倾向于在我设计的每个网站上都这样做 但我还没有真正找到真正的好方法来做到这一点 公司通常会给我他们的徽标 当您进入该页面时 我将其置于屏幕中间 然后它会自动将您转发到主页 如果没有一堆表格和 div 我似乎找不到一种将图像居中于屏幕中间的

  • 如何更改 libgdx 中位图字体的 alpha

    我想制作一个消息框 当您接受时该消息框会消失 但我不知道如何更改字体的 alpha 这是我制作字体的方法 white new BitmapFont Gdx files internal data font whitefont fnt fal

  • 如何更改 Apache FOP Xalan XSLT 处理器？

    我正在使用 Apache FOP 1 1 我想将当前的 apache Xalan XSLT 处理器更改为其他处理器以支持 XSLT 2 0 目前它不支持 XSLT 2 0 请帮助我如何解决这个问题 谢谢 我得到了答案 Transformer

  • 将循环的每次迭代延迟一定时间

    JSFiddle http jsfiddle net KH8Gf 27 Code document ready function expand click function var qty qty val for var counter 0

  • sigma.js 不读取 JSON

    我有这个页面 div div

热门标签