0

我正在使用 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。

4

1 回答 1

0

为什么不创建一个 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"]

}
于 2014-11-30T17:19:16.127 回答