如何向从 json 文件加载的图形添加拖动节点功能

Question

我正在尝试 sigma.js。我有以下工作示例，我可以从磁盘加载我的 JSON 对象。

<script>
sigma.parsers.json( "/data/prc_network.json",
  {container: 'network-graph'},

  function(s) { //This function is passed an instance of Sigma s
    //Initialize nodes as a circle
    s.graph.nodes().forEach(function(node, i, a) {
      node.x = Math.cos(Math.PI * 2 * i / a.length);
      node.y = Math.sin(Math.PI * 2 * i / a.length);
    });
    s.refresh();
    s.startForceAtlas2();
  });
</script>

我正在查看另一个示例 drag-nodes.html，它创建了一些随机节点，然后将它们插入到图中，它还定义了 listeners（对于 drag/drop 事件）。你能帮我解决如何添加上面的代码，其中 json 从文件 '/data/prc_network.json' 加载到以下代码（我想摆脱创建随机节点并使用从物理文件加载的节点）。我尝试了很少的想法，但它根本不起作用。

var i,
    s,
    N = 100,
    E = 500,
    g = {
      nodes: [],
      edges: []
    };

// Generate a random graph:
for (i = 0; i < N; i++)
  g.nodes.push({
    id: 'n' + i,
    label: 'Node ' + i,
    x: Math.random(),
    y: Math.random(),
    size: Math.random(),
    color: '#666'
  });

for (i = 0; i < E; i++)
  g.edges.push({
    id: 'e' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
    size: Math.random(),
    color: '#ccc'
  });

s = new sigma({  graph: g,  container: 'graph-container'});
// Initialize the dragNodes plugin:
var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);

dragListener.bind('startdrag', function(event) {  console.log(event);});
dragListener.bind('drag', function(event) {  console.log(event);});
dragListener.bind('drop', function(event) { console.log(event);});
dragListener.bind('dragend', function(event) {console.log(event); });

Answer 1

我终于找到了解决方案：

<script>
var g = {
      nodes: [],
      edges: []
    };

s = new sigma({
  graph: g,
  container: 'container',
   renderer: {
    container: document.getElementById('network-graph'),
    type: 'canvas'
   }
});

sigma.parsers.json( "/data/prc_network.json",s,
  function(s) { //This function is passed an instance of Sigma s
    //Initialize nodes as a circle
    s.graph.nodes().forEach(function(node, i, a) {
      node.x = Math.cos(Math.PI * 2 * i / a.length);
      node.y = Math.sin(Math.PI * 2 * i / a.length);
    });
    s.refresh();
    s.startForceAtlas2();
  });
</script>

如何向从 json 文件加载的图形添加拖动节点功能

How to add drag-nodes functionality to graph loaded from json file

sigma.js