Question

我正在使用dagre d3进行数据可视化，制作有序图表，而我却陷入了设置边缘的困境。看看这段代码，我被困了

/*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
}

图表已订购，并且Root位于顶部。从根节点我设法从根到达所有级别为0的节点。现在我想从所有那些级别为0并且有子级的边创建边，然后从级别为1且具有子级的边创建边等等。我已经尝试了类似的东西并将此结构保存到C＃中的json，但我无法将我的C＃代码重写为javascript，因为我是javascript noob。

Answer 1

为什么不创建DOT字符串并加载它。

我为你的对象创建了一个例子：

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

在C＃代码中创建此DOT字符串：

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

}

dagre d3从父母到其所有孩子的边缘

1 个答案: