创建 .json 文件并将数据存储在 javascript 中——使用 vis.js

Question

在我的项目中，我需要将数据保存到 .txt 或 .xml 或 .json 文件。我无法从 vis.js website/issues 博客中找到任何答案。可能很简单，不知道。如果有人用示例代码帮助我，那真的很有帮助。非常感谢您。

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

Answer 1

如果我没理解错的话，您正在寻找一种方法来保存图表的数据和选项。在我的 graph editor adaptation for TiddlyWiki Classic 中，我使用以下方法提取数据（完整的实现可以在 repo 中找到，参见 config.macros.graph.saveDataAndOptions，这是一个简化的方法）：

config.macros.graph.saveDataAndOptions = function(network,newOptions) {

    newOptions = newOptions || {};

    // get nodes and edges
    var nodes = network.body.data.nodes._data; // contains id, label, x,y, custom per-node options and doesn't contain options from options.nodes; presumably contains option values set when network was created, not current ones (it is so for x,y)
    // no suitable getter unfortunately
    var edges = network.body.data.edges._data; // map; for edges to/from? certain node use network.getConnectedNodes(id)
    // network.body.data.edges._data is a hash of { id: , from: , to: }

    // get node positions, options
    var positions = network.getPositions(), // map
        options = // get options stored previously
    // merge newOptions into options

    for(var nodeId in nodes) {
        // nodes[nodeId].x is the initial value, positions[nodeId].x is the current one
        if(positions[nodeId]) { // undefined for hidden
            nodes[nodeId].x = positions[nodeId].x;
            nodes[nodeId].y = positions[nodeId].y;
        }
        storedNode = copyObjectProperties(nodes[nodeId]);

        storedNodes.push(storedNode);
    }

    //# do whatever you need with storedNodes, edges and options
    //  (pack them with JSON.stringify, store to a file etc)
};

然而，虽然这可以用于存储数据，但这仅有助于保存为显式存储传递的选项，这在某些情况下可能不是很好。我在 manipulation 助手和 dragEnd (network.on("dragEnd",this.saveToTiddlerAfterDragging), config.macros.graph.saveToTiddlerAfterDragging = function(stuff) { config.macros.graph.saveDataAndOptions(this,{ physics: false }); };) 中使用了这个方法。不过，我 haven't recieved 还有更好的建议。

如果您需要被动地获取数据和选项并且设置这样的帮助程序来处理某些编辑事件不能解决您的问题，那么我建议包装 nodes、edges 和 options 作为 vis.DataSet 并在需要时保存。 This也有关系。

回答有关 events/other 使用此类方法的问题。以下是我如何使用它们：

我在拖放移动节点后保存数据，这是使用事件处理程序完成的。即，我介绍了
```
config.macros.graph.saveToTiddlerAfterDragging = function(stuff) {
    config.macros.graph.saveDataAndOptions(this,{ physics: false });
};
```
（使用拖放时，应关闭物理，否则无论如何都不会保留坐标）然后我使用
```
network.on("dragEnd",this.saveToTiddlerAfterDragging);
```
以便保存更改。
至于在adding/editing一个node/edge之后保存，我不是通过事件应用保存的（虽然这是个好主意，你应该尝试events of DataSet, since there's no special graph events ).我所做的是在操作方法中添加精心设计的劫持。看看我在
之后链接的来源
```
var mSettings = options.manipulation;
```
行：对于每个操作方法，比如options.manipulation.addNode我劫持它，所以它的回调被劫持到最后调用config.macros.graph.saveDataAndOptions。这是我正在做的事情的简化版本：
```
var nonSaving_addNode = options.manipulation.addNode;
options.manipulation.addNode = function(data,callback) {
    // hijack callback to add saving
    arguments[1] = function() {
        callback.apply(this,arguments); // preserve initial action
        config.macros.graph.saveDataAndOptions(network); // add saving
    };
    nonSaving_addNode.apply(this,arguments);
}
```
事实是，addNode 实际上是在单击添加节点按钮时调用的；不过，我正在使用自定义的创建弹出窗口并在用户对他们选择的标签感到满意后应用更改。

创建 .json 文件并将数据存储在 javascript 中——使用 vis.js

Creating .json file and storing data in javascript -- using vis.js

javascript

json

vis.js

vis.js-network