dagre d3 make edges from parent to all its children

Question

I am using dagre d3 for visualisation of data, making ordered diagram and I am stuck at setting up edges. Take a look at this piece of code where I am stucked

/*data has this template   
  level: type: label
  f.e.: 0: call: label1 //child of root
         1: call: label2 //is child of 0
          2: call: label3 //is child of 1
          2: exit: label4 //is child of 1
         1: exit: label5 //is child of 0, does not have children
        0: exit: label6 //is child of root, does not have children
*/
function makeGraph(data){
    //parsing data here, object from it looks like below saving to array named 'states'
    //object = { id: id, level: par[1], type: par[2], label: par[3] };

    var g = new dagreD3.graphlib.Graph().setGraph({});
    g.setNode("root", { label: " ", style: "fill: #AAAAAA" }); //root node

    states.forEach(function (state) {
        g.setNode(state.id, { label: state.label, style: "fill: " + state.color });
        if (state.level == 0) {
            g.setEdge("root", state.id, { label: state.type });
        } else {
            //I can't find out how to set edges to parent here
        }
    });

   //continuation of function with rendering
}

The diagram is ordered and have Root on top. From root node I managed to make edges from root to all nodes with level 0. Now I want to make edges from all those edges whose level are 0 and have children, then from edges whose levels are 1 and have children and so on. I've already tried something similar and saved this structure to json in C#, but I am not able to rewrite my C# code to javascript because I am javascript noob.

Answer 1

Why don't you create a DOT string and load that.

I created an example for your objects:

http://jsfiddle.net/AydinSakar/sbna95u0/

Create this DOT string in your C# code:

digraph g {
root [label = "", style= "fill: #AAAAAA"];

label1 [label = "label1", style= "fill: #AAAAAA"]
root -> label1 [label = "call"]

label2 [label = "label2", style= "fill: #AAAAAA"]
label1 -> label2 [label = "call"]

label3 [label = "label3", style= "fill: #AAAAAA"]
label2 -> label3 [label = "call"]

label4 [label = "label4", style= "fill: #AAAAAA"]
label2 -> label4 [label = "exit"]

label5 [label = "label5", style= "fill: #AAAAAA"]
label1 -> label5 [label = "exit"]

label6 [label = "label6", style= "fill: #AAAAAA"]
root -> label6 [label = "exit"]

}