d3js works after encode decode data

Question

I'm working on a visualization of data with d3js and hierarchical layout. My data looks like this:

       0
     / | \
    /  |  \ 
   1   5   3
    \  |   |
     \ |   |
       4  /
       | /
       2

As I can't make link to multiple parent, I duplicates nodes on display:

       0
     / | \
    /  |  \ 
   1   5   3
   |   |   |
   |   |   |
   4   4   |
   |   |   |
   2   2   2

I've made a fiddle demo to show my problem:

• When I use correct data in my JSON input, I have the good layout (graphic in border blue).
• When I use a loop to parse my JSON input, I have strange graph (graphic in border green).

This is the loop I used to parse the input:

for (i in root[2].Arcs){
  var d = root[1].Nodes[root[2].Arcs[i].D];
  var s = root[1].Nodes[root[2].Arcs[i].S];
  if (!d.children){
    d.children = [];
  }
  d.children.push(s);
}

For me : both printed element in console are the same, but not the render of layout. There are maybe some differents in object reference.

A bad solution I found is to decode then encode my var :

    var root = JSON.parse(JSON.stringify(root));

Then the script works good. But I root is a long long array, the parsing takes long time...

Any idea to explain why I need to use that encode/decode to display same things ?

Thank you

Answer 1

You are supposed to encode/decode JSON to prevent shallow copy. To know more what about deepcopy and shallowcopy, here is link. What is the difference between a deep copy and a shallow copy?

As var root = JSON.parse(JSON.stringify(root)); is a wrong way to prevent shallow copy, you can use jquery's clone method or simply javascripts slice method to deepcopy javascript array.

for example.

var d=[1,2,3,4,5,6];//create array
var b=d;//copy array into another array (shallow copy/reference copy)
var e=d.slice();//clone array in another variable (deep copy)
d[0]=9; //change array element
console.log(d)// result : [9,2,3,4,5,6] (changed array)
console.log(b)// result : [9,2,3,4,5,6] (changed array due to reference)
console.log(e)// result : [1,2,3,4,5,6] (unchanged array due to deep copy)

There is another solution is use underscore. If you don't want full javascript code of underscore, then you can pick cloning portion in underscore library.

In underscore, you can clone object array using:

var a = [{f: 1}, {f:5}, {f:10}];
var b = _.map(a, _.clone);       // <----
b[1].f = 55;
console.log(JSON.stringify(a));

It will Print

[{"f":1},{"f":5},{"f":10}]

Answer 2

You can replace your for loop with something like this, don't know about performance though. jsfiddle

traverse(root[1].Nodes[0]);
function traverse(node) {
    for (i in root[2].Arcs) {
        var d = root[1].Nodes[root[2].Arcs[i].D];
        if (node.name === root[2].Arcs[i].D) {
            var s = root[1].Nodes[root[2].Arcs[i].S];
            var sCopy={
                "name": s.name
            }
            traverse(sCopy);
            if (!node.children) {
               node.children = [];
            }
            node.children.push(sCopy);
        }
    }
}

Answer 3

NOTE: The performance is not as good as the original post, see comments below. This way is meant to be scalable, so no matter what the object (and the flags look like), it should work

Answer

Here's another take on the "deep copy" approach as suggested by @transcranial and @LaxmikantDange.

I suggest using jquery (my preferred approach: write less, do more) and using its extend routine:

<<load jquery>>

root = $.extend(true, {}, root[1].Nodes[0]);
graph(root2,svg);
graph(root,svg2);

Make sure you have that true as first argument as can be seen here http://api.jquery.com/jquery.extend/ or here What is the most efficient way to deep clone an object in JavaScript? (top answer)

Not sure about performance, but I hope it's not too bad. If you test, please let me know!

Please also not that a deep copy might be questionable depending on your application (broken links etc). For instance, I recently built a react app that shares events between graphs - and sharing e.g. zoom events (that adjust the rendered object) are not "automatically shared" (as the objects are separate, if you know what I mean.

Answer 4

When you push additional nodes (which are objects) onto your arrays of children nodes, those objects must be cloned (deep copied). Reassignment "=" only works for string or number arrays. Deep copying your children nodes before pushing them onto your array fixes the layout and the rendering.

Your original code for pushing children nodes into the array:

for (i in root[2].Arcs){
  var d = root[1].Nodes[root[2].Arcs[i].D];
  var s = root[1].Nodes[root[2].Arcs[i].S];
  if (!d.children){
    d.children = [];
  }
  d.children.push(s);
}

Modified:

for (i in root[2].Arcs){
  var d = root[1].Nodes[root[2].Arcs[i].D];
  var s = root[1].Nodes[root[2].Arcs[i].S];
  if (!d.children){
    d.children = [];
  }
  d.children.push(JSON.parse(JSON.stringify(s)));
}

Check it out: JSFiddle.

Also, the d3 hierarchical layouts including cluster don't support having multiple parents out of the box. For that, you can try using a force graph layout.