2016-08-31 50 views
0

我願意在我的html中使用Dagre。 這裏是我的js代碼:如何通過使用Dagre獲得橫向視圖?

var g = new dagreD3.graphlib.Graph() 
        .setGraph({}) 
        .setDefaultEdgeLabel(function() { return {}; }); 
      var i = 0; 
      var nodes = ["a", "b", "c", "d"]; 
      nodes.forEach(function (node) { 
       ggg.setNode(node,{ style: "fill: #afa"}); 
      }); 
      g.nodes().forEach(function(v) { 
       var node = g.node(v); 
       // Round the corners of the nodes 
       node.rx = node.ry = 5; 
      }); 
      i = 0; 
      for(i=0;i<3;++i) { 
       g.setEdge(nodes[i],nodes[i+1],{label:"lable"}); 
      } 
      var render = new dagreD3.render(); 
      var svg = d3.select("#mysvg"), 
        svgGroup = svg.append("g"); 
      render(d3.select("#mysvg g"),g); 

而且結果默認是豎看:

難道可能性,通過使用Dagre這樣做出水平有何看法? enter image description here

回答

4

這爲我工作

g.graph().rankDir = 'LR'; 
+0

謝謝。你是怎麼知道這件事的? –

+1

它在[dagre wiki](https://github.com/cpettitt/dagre/wiki#configuring-the-layout)中,而不是dagre-d3 wiki。 – tarp