How to export/save updated d3.js v4 tree json data string

Question

I'm using the following code:

https://bl.ocks.org/adamfeuer/042bfa0dde0059e2b288

And am loading a very simple json string to create the tree:

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

So what I'm trying to figure out is that after I add a new child node to the "flare" node (for example), how can I create an updated json string in order to save the newly added node?

An example of the updated json after adding a new node would be like so:

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

Is there some built in function for this that I am not finding? Or would a custom function have to be built? And if I need a custom function could somebody please point me in the right direction to do so? Thank you very much!

score 3 · Accepted Answer · answered Mar 18 '19 at 13:13

I propose this solution that is not perfect and which deserves improvements but that works, it will help you get started.

All the code below is added at the end of the update function in the dndTree.js file.

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

Now that you have your json, you can either :

Download your new tree.json file :

 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');

Or you could directly write in your file.

An example with node.js :

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

Check this for more informations to save a file: How do I save JSON to local text file

Thanks @abvlle.. I like this approach as an alternative to what I finally figure out which I didn't know you could simply access the data like so `JSON.stringify(root.data)`. But in order for that to work I also had to adjust the create_node/delete_node functions to be sure they also updated the parent node data as well.. But I lose access to the auto generated id's that route so I may still use this approach should I want those. Thank you! — Rick, Mar 18 '19 at 23:45

How to export/save updated d3.js v4 tree json data string

1 Answers1