使用visjs在我的json文件中获取错误的连接

时间：2018-04-11 11:15:06

标签： javascript vis.js vis.js-network

我有四个节点，它们的ID是1,2,3,4; 1和2是父节点，3是子节点。边缘从1到3,2到3.第四个节点id 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>

实际上，此代码段是vis.js's manupulation example，只添加了几行。

当我创建像这样的节点和边（标记为“one”的节点的id为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: [    ]  }]"

1 个答案:

答案 0 :(得分：0)

嗯，这有点简单。相关的是这个：

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，它们不是相应节点的ID，会让您的连接发生变化。使用索引的整个方法是错误的，但可以很容易地修复：只使用实际的ID：

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

（我已经对此进行了测试，并且按预期工作）

相关问题
最新问题