使用sigma.js

Question

我使用此代码将JSON文件数据显示为图形但不显示任何内容。

如何使用图表形式的sigma.js显示此JSON数据。

任何指针都将不胜感激！

代码

＆＃13;

＆＃13;

var data = {
  "UniversalWord": {
    "UniversalWord": [{
      "uw_id": 1,
      "HeadWord": {
        "word": "aare"
      },
      "Restriction": {
        "SemanticRelations": {
          "feat": [{
              "att": "restriction_type",
              "value": "iof"
            },
            {
              "att": "target",
              "val": " "
            }
          ]
        }
      },
      "NLDescription": {
        "Gloss": {
          "feat": {
            "att": "Description",
            "val": "\"A RIVER IN NORTH CENTRAL SWITZERLAND THAT RUNS NORTHEAST INTO THE RHINE\""
          }
        },
        "Lemma": {
          "feat": {
            "att": "word",
            "val": "aare"
          }
        },
        "Example": {
          "feat": {
            "att": "description",
            "val": "\"\""
          }
        }
      },
      "MetaInfo": {
        "Frequency": {
          "freq": ""
        },
        "UWSource": {
          "Source_id": "WORDNET"
        }
      }
    }]
  }
}

// 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(
  //'test.json',
  data,
  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();
  }
);

＆＃13;

.link {
  fill: none;
  stroke: #000;
}

.node {
  stroke: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.0/sigma.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.0/plugins/sigma.parsers.json.min.js"></script>

<div id="graph-container"></div>

＆＃13;

＆＃13;

＆＃13;