dagrejs / dagre

Directed graph layout for JavaScript
MIT License
4.63k stars 600 forks source link

Auto Layout to start diagram from centre instead of left #249

Open MohammedAbdulMateen opened 6 years ago

MohammedAbdulMateen commented 6 years ago

Hi,

Thanks for creating this plugin, I was struggling to create an auto layout for a diagram (questionnaire) which consists of nodes (div's) and edges (SVG's created using jsPlumb) but I tried code from this article http://onais-m.blogspot.com/2014/10/automatic-graph-layout-with-javascript.html

        function autoLayout(nodes, jsPlumbInst) {
            // construct dagre graph from JsPlumb graph
            var g = new dagre.graphlib.Graph();
            g.setGraph({});
            g.setDefaultEdgeLabel(function () { return {}; });

            for (var i = 0; i < nodes.length; i++) {
                var n = nodes[i];
                g.setNode(n.id, { width: parseInt($(n).css('width')), height: 100 });
            }

            var edges = jsPlumbInst.getAllConnections();
            for (var i = 0; i < edges.length; i++) {
                var c = edges[i];
                g.setEdge(c.source.id, c.target.id);
            }

            // calculate the layout (i.e. node positions)
            dagre.layout(g);

            // Applying the calculated layout
            g.nodes().forEach(function (v) {
                $("#" + v).css("left", g.node(v).x + "px");
                $("#" + v).css("top", g.node(v).y + "px");
            });
        }

This has done the auto layout for the diagram in a nice way, but the diagram goes from left to right, but I want the diagram to start in the middle and spread left and right as required i.e. like center aligned.

Please help on how to achieve this.

ipavlic commented 6 years ago

I don't believe that's supported by the library or by papers the library is using.

MohammedAbdulMateen commented 6 years ago

oh is that so... okay

atulgirishkumar commented 5 years ago

Hi, @ipavlic again a very nice plugin. We are using it with jointjs. It beautifully spans the graph from left to right, but we are in need of the functionality mentioned by @MohammedAbdulMateen . We want the graph node to be starting from the center and spanning left and right.

Thanks.

mawg commented 3 years ago

Sigh ! And Dagre looked so promising too :-(

Oh, well, that's the end of that.

Can anyone suggest a library that will layout like that, and also auto-resize after dynamically adding anode to an existing graph?