dagre d3 сделать ребра из родителя во все его дочерние объекты

Question

Я использую dagre d3 для визуализации данных, создания упорядоченной диаграммы, и я застреваю при настройке краев. Посмотрите на этот кусок кода, где я 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 
} 

Диаграмма упорядочено и имеет корень сверху. Из корневого узла мне удалось сделать ребрами от корня до всех узлов с уровнем 0. Теперь я хочу сделать ребра из всех тех ребер, уровень которых равен 0, и у них есть дети, а затем из ребер, уровни которых равны 1, и у них есть дети и т. Д. Я уже пробовал что-то подобное и сохранил эту структуру json в C#, но я не могу переписать свой код C# на javascript, потому что я javascript noob.

Answer 1

Почему бы вам не создать строку DOT и загрузить ее.

Я создал пример для ваших объектов:

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

Создать эту строку DOT в коде C#:

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"] 

}