I am willing to using Dagre in my html. Here's my js code:

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);

And the result is vertical view by default:

Is it possibility make it to horizontal view by using Dagre like this?

I am willing to using Dagre in my html. Here's my js code:

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);

And the result is vertical view by default:

Is it possibility make it to horizontal view by using Dagre like this?

• javascript
• dagre-d3
• dagre

1 Answer 1

This worked for me

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