Получить неправильные соединения в моем json файле для узлов, использующих visjs

У меня четыре узла, их идентификаторы 1, 2, 3, 4; 1 и 2 - родительские узлы, а 3 - дочерний узел. Края идут от 1 до 3, от 2 до 3. Четвертый узел с идентификатором 4 не имеет соединений. Пожалуйста, помогите мне правильно сохранить узел и соединения. Прямо сейчас, когда я создаю узел, сохраняется файл json. Файл содержит узлы, их координаты и связи, но последние сохранены некорректно.

body, select {
    font: 14pt sans;
}
#mynetwork {
    width: 800px;
    height: 500px;
    border: 1px solid green;
}
table.legend_table {
    font-size: 11px;
    border-width:1px;
    border-color:#d3d3d3;
    border-style:solid;
}
table.legend_table,td {
    border-width:1px;
    border-color:#d3d3d3;
    border-style:solid;
    padding: 2px;
}
div.table_content {
    width:80px;
    text-align:center; 
}
div.table_description {
    width:100px;
}

#operation {
    font-size:28px;
}

#label {
    font-size:14px;
}
#network-popUp {
    display:none;
    position:absolute;
    top:50px;
    right:150px;
    z-index:9;
    width:400px;
    height:200px;
    background-color: #f9f9f9;
    border-style:solid;
    border-width:3px;
    border-color: #5394;
    padding:10px;
    text-align: center;
    font-size: 11px;
}
<head>
    <meta charset="utf-8">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js">
    </script>
		 <script type="text/javascript" src="http://visjs.org/dist/vis.js"> </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
    <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    // randomly create some nodes and edges
    var data = {};
    var seed = 2;

    function setDefaultLocale() {
      var defaultLocal = navigator.language;
      var select = document.getElementById('locale');
      select.selectedIndex = 0; // set fallback value
      for (var i = 0, j = select.options.length; i < j; ++i) {
        if (select.options[i].getAttribute('value') === defaultLocal) {
          select.selectedIndex = i;
          break;
        }
      }
    }

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();
      nodes = [];
      edges = [];

      // create a network
      var container = document.getElementById('mynetwork');
      var options = {
        layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
        locale: document.getElementById('locale').value,
        manipulation: {
          addNode: function (data, callback) {
            // filling in the popup DOM elements
            document.getElementById('operation').innerHTML = "Add Node";
            document.getElementById('node-id').value = data.id;
            document.getElementById('node-label').value = data.label;
            document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
            document.getElementById('cancelButton').onclick = clearPopUp.bind();
            document.getElementById('network-popUp').style.display = 'block';
          },
          editNode: function (data, callback) {
            // filling in the popup DOM elements
            document.getElementById('operation').innerHTML = "Edit Node";
            document.getElementById('node-id').value = data.id;
            document.getElementById('node-label').value = data.label;
            document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
            document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
            document.getElementById('network-popUp').style.display = 'block';
          },
          addEdge: function (data, callback) {
            if (data.from == data.to) {
              var r = confirm("Do you want to connect the node to itself?");
              if (r == true) {
                callback(data);
              }
            }
            else {
              callback(data);
            }
          }
        }
      };
      network = new vis.Network(container, data, options);
    }

    function clearPopUp() {
      document.getElementById('saveButton').onclick = null;
      document.getElementById('cancelButton').onclick = null;
      document.getElementById('network-popUp').style.display = 'none';
    }


    function savedataandedge () {

        var nodes = objectToArray(network.getPositions());

        nodes.forEach(addConnections);

        var exportValue = JSON.stringify(nodes, undefined, 2);
        let dataStr = JSON.stringify(exportValue.replace(/\r?\n|\r?\"/g,''));
        let dataUri = 'data:application/json,'+encodeURIComponent(dataStr);
		
        let exportFileDefaultName = 'testingG.json';
		
        let linkElement = document.createElement('a');
        linkElement.setAttribute('href',dataUri);
        linkElement.setAttribute('download',exportFileDefaultName);
        linkElement.click();				
    }
		
    function objectToArray(obj) {
        return Object.keys(obj).map(function (key) {
            obj[key].id = key;
            return obj[key];
        });
    }
			
    function addConnections(elem, index) {
        elem.connections = network.getConnectedNodes(index);
    }
	
    function cancelEdit(callback) {
        clearPopUp();
        callback(null);
    }

    function saveData(data,callback) {
        data.id = document.getElementById('node-id').value;
        data.label = document.getElementById('node-label').value;
        clearPopUp();
        callback(data);
	    savedataandedge ();
    }

    function init() {
        setDefaultLocale();
        draw();
    }

  </script>
</head>

<body onload="init();">
<h2>Editing the nodes and edges (localized)</h2>
<p style="width: 700px; font-size:14px; text-align: justify;">
  The localization is only relevant to the manipulation buttons.
</p>

<p>
  <label for="locale">Select a locale:</label>
  <select id="locale" onchange="draw();">
    <option value="en">en</option>
    <option value="de">de</option>
    <option value="es">es</option>
    <option value="it">it</option>
    <option value="nl">nl</option>
    <option value="pt-br">pt</option>
    <option value="ru">ru</option>
  </select>
</p>

<div id="network-popUp">
  <span id="operation">node</span> <br>
  <table style="margin:auto;"><tr>
    <td>id</td><td><input id="node-id" value="new value" /></td>
  </tr>
    <tr>
      <td>label</td><td><input id="node-label" value="new value" /></td>
    </tr></table>
  <input type="button" value="save" id="saveButton" />
  <input type="button" value="cancel" id="cancelButton" />
</div>
<br />
<div id="mynetwork"></div>

</body>
</html>

Фактически, этот фрагмент - это Пример manupulation vis.js, в который добавлено всего несколько строк.

Когда я создаю такие узлы и ребра (узел с меткой «один» имеет идентификатор 1 и т. Д.):

nodes and edges

Я получаю такой файл JSON:

"[{    x: -255,   y: -230,    id: 1,    connections: []  },  
  {    x: -69,    y: -226,    id: 2,    connections: [    3    ]  }, 
  {    x: -144,   y: -108,    id: 3,    connections: [    3    ]  },  
  {    x: -6,     y: -150,    id: 4,    connections: [    1,   2   ]  }]"

но должно быть (обратите внимание на неправильные соединения):

 "[{    x: -255,   y: -230,   id: 1,    connections: [  3  ]  },  
   {    x: -69,    y: -226,   id: 2,    connections: [  3    ]  }, 
   {    x: -144,   y: -108,   id: 3,    connections: [   1,   2   ]  },  
   {    x: -6,     y: -150,   id: 4,    connections: [    ]  }]"
0
0
233
1

Ответы 1

Что ж, это несколько просто. Соответствующий бит таков:

function savedataandedge () {

    var nodes = objectToArray(network.getPositions());

    nodes.forEach(addConnections);

    var exportValue = JSON.stringify(nodes, undefined, 2);
    let dataStr = JSON.stringify(exportValue.replace(/\r?\n|\r?\"/g,''));
    let dataUri = 'data:application/json,'+encodeURIComponent(dataStr);

    let exportFileDefaultName = 'testingG.json';

    let linkElement = document.createElement('a');
    linkElement.setAttribute('href',dataUri);
    linkElement.setAttribute('download',exportFileDefaultName);
    linkElement.click();                
}

и это:

function addConnections(elem, index) {
    elem.connections = network.getConnectedNodes(index);
}

Вы используете nodes.forEach, который применяет ваш addConnections для каждого узла и дает ему аргументы: elem, index, где index начинается с 0, поэтому его заданное значение становится 0, 1, 2, 3, которое не является идентификатором соответствующего узла, и ваши соединения меняются . Весь подход к использованию индексов неверен, но его легко исправить: просто используйте фактические идентификаторы:

function addConnections(node, index) {
    node.connections = network.getConnectedNodes(node.id);
}

(Я тестировал это, и он работает так, как вы ожидаете)

Другие вопросы по теме