Использование vis.js для заполнения узлов и ссылок из файла json - PullRequest
Новая
       16

Использование vis.js для заполнения узлов и ссылок из файла json

0 голосов
/ 21 ноября 2019

Я использую базовый файл html и json для визуализации узлов и ссылок с помощью vis.js. Файлы Json содержат список узлов и ссылок / ребер. Я ссылаюсь на пример SO здесь, чтобы запустить его ... пример . Я тестирую на примерах, и это работает и показывает все узлы и ссылки. Я заменяю файл json моими собственными данными, и когда я выполняю код ... он просто показывает узлы без какой-либо ссылки.

Мой файл Json 

{
  "nodes": [
    {
      "id": "openflow:1",
      "tpid": [
        "openflow:1:2",
        "openflow:1:1",
        "openflow:1:LOCAL"
      ]
    },
    {
      "id": "host:00:00:00:00:00:01",
      "ip": "10.0.0.1",
      "mac": "00:00:00:00:00:01",
      "tpid": [
        "host:00:00:00:00:00:01"
      ]
    },
    {
      "id": "openflow:2",
      "tpid": [
        "openflow:2:LOCAL",
        "openflow:2:1",
        "openflow:2:2"
      ]
    },
    {
      "id": "host:00:00:00:00:00:02",
      "ip": "10.0.0.2",
      "mac": "00:00:00:00:00:02",
      "tpid": [
        "host:00:00:00:00:00:02"
      ]
    }
  ],
  "edges": [
    {
      "id": "host:00:00:00:00:00:01/openflow:1:1",
      "source": "host:00:00:00:00:00:01",
      "target": "openflow:1:1"
    },
    {
      "id": "openflow:2:1/host:00:00:00:00:00:02",
      "source": "openflow:2:1",
      "target": "host:00:00:00:00:00:02"
    },
    {
      "id": "openflow:1:2",
      "source": "openflow:1:2",
      "target": "openflow:2:2"
    },
    {
      "id": "openflow:2:2",
      "source": "openflow:2:2",
      "target": "openflow:1:2"
    },
    {
      "id": "openflow:1:1/host:00:00:00:00:00:01",
      "source": "openflow:1:1",
      "target": "host:00:00:00:00:00:01"
    },
    {
      "id": "host:00:00:00:00:00:02/openflow:2:1",
      "source": "host:00:00:00:00:00:02",
      "target": "openflow:2:1", "color":{"color":"green", "highlight":"blue"}, "arrows":{"target":{"scaleFactor":"1.25", "type":"circle"}}
    }
  ]
}

Это HTML-файл 

i<!doctype html>
<HTML>
<HEAD>
  <meta charset="utf-8" />
  <TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>

  <!-- NPM (http://visjs.org/index.html#download_install): -->
  <!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

  <!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <!-- http://visjs.org/index.html#download_install -->
  <!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">

  <style type="text/css">
    #mynetwork {
        /* width: 600px; */
        width: 100%;
        height: 800px;
        border: 2px solid lightgray;
    }
    </style>
</HEAD>

<BODY>

<div id="mynetwork"></div>

<!-- Add an invisible <div> element to the document, to hold the JSON data: -->
<div id="networkJSON-results" class="results" style="display:none"></div>

<script type="text/javascript">

  // -------------------------------------------------------------------------
  // OPTIONS:

  // http://visjs.org/docs/network/#modules
  // http://visjs.org/docs/network/edges.html#
  // http://visjs.org/docs/network/physics.html#

  var options = {
    edges: {
      arrows: {
        target: {enabled: true, scaleFactor:0.75, type:'arrow'},
        // to: {enabled: false, scaleFactor:0.5, type:'bar'},
        middle: {enabled: false, scalefactor:1, type:'arrow'},
        source: {enabled: true, scaleFactor:0.3, type:'arrow'}
        // from: {enabled: false, scaleFactor:0.5, type:'arrow'}
      },
      arrowStrikethrough: true,
      chosen: true,
      color: {
      // color:'#848484',
      color:'red',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
      },
      dashes: false,
      font: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        background: 'none',
        strokeWidth: 2, // px
        strokeColor: '#ffffff',
        align: 'horizontal',
        multi: false,
        vadjust: 0,
        bold: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'bold'
        },
        ital: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'italic'
        },
        boldital: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'bold italic'
        },
        mono: {
          color: '#343434',
          size: 15, // px
          face: 'courier new',
          vadjust: 2,
          mod: ''
        }
      }
    },
    // http://visjs.org/docs/network/physics.html#
    physics: {
      enabled: true,
      barnesHut: {
        gravitationalConstant: -2000,
        centralGravity: 0.3,
        // springLength: 95,
        springLength: 175,
        springConstant: 0.04,
        damping: 0.09,
        avoidOverlap: 0
      },
      forceAtlas2Based: {
        gravitationalConstant: -50,
        centralGravity: 0.01,
        springConstant: 0.08,
        springLength: 100,
        damping: 0.4,
        avoidOverlap: 0
      },
      repulsion: {
        centralGravity: 0.2,
        springLength: 200,
        springConstant: 0.05,
        nodeDistance: 100,
        damping: 0.09
      },
      hierarchicalRepulsion: {
        centralGravity: 0.0,
        springLength: 100,
        springConstant: 0.01,
        nodeDistance: 120,
        damping: 0.09
      },
      maxVelocity: 50,
      minVelocity: 0.1,
      solver: 'barnesHut',
      stabilization: {
        enabled: true,
        iterations: 1000,
        updateInterval: 100,
        onlyDynamicEdges: false,
        fit: true
      },
      timestep: 0.5,
      adaptiveTimestep: true
    },
  };

// -------------------------------------------------------------------------
// IMPORT DATA FROM EXTERNAL JSON FILE:

// Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:

// NOTES:
// 1. Must use double quotes ("; not ') in that JSON file;
// 2. Cannot have comments in that file, only data!  See:
//    https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
// 3. Per the path below, place the "test.json" file in a "data" subdirectory.

var json = $.getJSON("data/11-test2.json")
  .done(function(data){
    var data = {
      nodes: data.nodes,
      edges: data.edges
    };
    var network = new vis.Network(container, data, options);
  });

var container = document.getElementById('mynetwork');

</script>

</BODY>
</HTML>

Выводятся только узлы без ссылок / ребер enter image description here

Я проверил это несколько раз, но не смог найти узкое место ... Спасибо, кто-то посоветует ... что здесь может быть не так ... Спасибо

22/11/19- Цените кого-то, кто знает об этой проблеме ... Я изменил свой файл json и изменил источник / цель -> на / из и все тот же ... ссылка не видна ...

* 23/11/19 - до сих пор не ключ к решению проблемы. Спасибо за ваши советы.

1 Ответ

1 голос
/ 25 ноября 2019

как вы говорите, ребра не структурированы как { id, source, target }, а как { id, from, to }. То же самое относится к options.edges.arrows.

Это также кажется проблематичным (две переменные с именем data в одной и той же области, хотя это больше похоже на плохую практику): 

  .done(function(data){
    var data = {
      nodes: data.nodes,
      edges: data.edges
    };

Фактический ответ на ваш вопросэто то, что вы соединяете ребра с узлами, которых у вас нет. Например, первое ребро идет от host:00:00:00:00:00:01 до openflow:1:1. Но нет узла openflow:1:1 (есть openflow:1, возможно, вы это имели в виду). Поскольку он нигде не указывает, он недопустим и поэтому игнорируется.

PS: строка версии 4.21.0 довольно старая и больше не обновляется. См. https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html для получения последней информации о Vis Network.

...