Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/383.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何导出/保存更新的d3.js v4树json数据字符串_Javascript_D3.js - Fatal编程技术网

Javascript 如何导出/保存更新的d3.js v4树json数据字符串

Javascript 如何导出/保存更新的d3.js v4树json数据字符串,javascript,d3.js,Javascript,D3.js,我正在使用以下代码: 我正在加载一个非常简单的json字符串来创建树: { "name": "flare", "children": [{ "name": "analytics" }, { "name": "animate" }] } 所以我想弄清楚的是,在我向“flare”节点(例如)添加一个新的子节点之后,如何创建一个更新的json字符串来保存新添加的节点 添加新节点后更新的json示例如下: { "name": "

我正在使用以下代码:

我正在加载一个非常简单的json字符串来创建树:

{
    "name": "flare",
    "children": [{
        "name": "analytics"
    }, {
        "name": "animate"
    }]
}
所以我想弄清楚的是,在我向“flare”节点(例如)添加一个新的子节点之后,如何创建一个更新的json字符串来保存新添加的节点

添加新节点后更新的json示例如下:

{
    "name": "flare",
    "children": [{
        "name": "analytics"
    }, {
        "name": "animate"
    }, {
        "name": "NEW NODE"
    }]
}

是否有一些我没有找到的内置函数?还是必须构建自定义函数?如果我需要一个自定义函数,有人能给我指出正确的方向吗?多谢各位

我提出的解决方案并不完美,值得改进,但确实有效, 它将帮助你开始

下面的所有代码都添加到dndTree.js文件中更新函数的末尾

console.log(root); //root contains everything you need
    const getCircularReplacer = (deletePorperties) => { //func that allows a circular json to be stringified
      const seen = new WeakSet();
      return (key, value) => {
        if (typeof value === "object" && value !== null) {
          if(deletePorperties){
            delete value.id; //delete all properties you don't want in your json (not very convenient but a good temporary solution)
            delete value.x0;
            delete value.y0;
            delete value.y;
            delete value.x;
            delete value.depth;
            delete value.size; 
          }
          if (seen.has(value)) {
            return;
          }
          seen.add(value);
        }
        return value;
      };
    };

    var myRoot = JSON.stringify(root, getCircularReplacer(false)); //Stringify a first time to clone the root object (it's allow you to delete properties you don't want to save)
    var myvar= JSON.parse(myRoot);
    myvar= JSON.stringify(myvar, getCircularReplacer(true)); //Stringify a second time to delete the propeties you don't need

    console.log(myvar); //You have your json in myvar
现在您有了json,您可以:

  • 下载新的tree.json文件:

     function download(content, fileName, contentType) {
       var a = document.createElement("a");
       var file = new Blob([content], {
         type: contentType
       });
       a.href = URL.createObjectURL(file);
       a.download = fileName;
       a.click();
     }
     download(myvar, 'tree.json', 'text/plain'); 
    
  • 或者您可以直接在文件中写入

node.js的一个示例:

    var fs = require('fs');
    fs.writeFile("tree.json", myvar, function(err) {
      if (err) {
        console.log(err);
      }
    });

有关保存文件的更多信息,请选中此项:

谢谢@abvlle。。我喜欢这种方法作为我最终发现的方法的替代方法,我不知道你可以简单地访问数据,比如so
JSON.stringify(root.data)
。但为了使其正常工作,我还必须调整create_node/delete_node函数,以确保它们也更新了父节点数据。。但是我无法访问自动生成的id的路径,所以如果我想要这些,我仍然可以使用这种方法。非常感谢。