Question

在我的项目中，我需要将数据保存到.txt或.xml或.json文件。我找不到vis.js网站/问题博客的任何答案。它可能很简单，不知道。如果有人帮我解决示例代码，真的很有帮助。非常感谢你。

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中，我使用以下方法提取数据（可以在回购中找到完整的实现，请参阅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和{{1} } options并在需要时保存。 This也是相关的。

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

我在拖放节点移动后保存数据，这是使用事件处理程序完成的。即，我介绍了
```
vis.DataSet
```
（当使用拖放时，物理应该关闭，否则坐标不会被保留）然后我用
```
config.macros.graph.saveToTiddlerAfterDragging = function(stuff) {
    config.macros.graph.saveDataAndOptions(this,{ physics: false });
};
```
以便保存更改。
对于添加/编辑节点/边缘后的保存，我不是通过事件应用保存（尽管它很好思考，你应该尝试events of DataSet，因为那里有＆＃39;没有特别的graph events。我所做的是为操作方法添加精心设计的劫持。看一下
之后链接的来源
```
network.on("dragEnd",this.saveToTiddlerAfterDragging);
```
line：对于每个操作方法，例如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); };但是，我使用自定义的创建弹出窗口并在用户对所选标签感到满意时应用更改。

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

1 个答案: