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
}

ダイアグラムは順序付けられており、ルートが一番上にあります。ルート ノードから、ルートからレベル 0 のすべてのノードへのエッジを作成することができました。次に、レベルが 0 で子を持つすべてのエッジからエッジを作成し、次にレベル 1 で子を持つエッジなどからエッジを作成します。私はすでに似たようなことを試し、この構造を C# の json に保存しましたが、私は JavaScript 初心者であるため、C# コードを JavaScript に書き直すことはできません。

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 に答える