javagraphgraph-visualizationgraphmljung2

How to show Tree Layout using JUNG but with tidier spacing and structure


I am trying to lay out some nodes in a Tree Layout using JUNG but would like to lay them out in a tidy spacing, similar to -

Tidy tree layout example

I have downloaded the JUNG project from https://github.com/jrtom/jung and found examples of edu.uci.ics.jung.samples.TreeLayoutDemo and edu.uci.ics.jung.samples.GraphFromGraphMLDemo but have still struggled to achieve what I am after.

The GraphML file contents looks like -

<?xml version="1.0" encoding="UTF-8"?>
<graphml xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns  http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
   <graph id="G" edgedefault="undirected">
      <node id="n0" />
      <node id="n1" />
      <node id="n2" />
      <node id="n3" />
      <node id="n4" />
      <node id="n5" />
      <node id="n6" />
      <node id="n7" />
      <node id="n8" />
      <node id="n9" />
      <node id="n10" />
      <edge source="n0" target="n2" />
      <edge source="n1" target="n2" />
      <edge source="n2" target="n3" />
      <edge source="n3" target="n5" />
      <edge source="n3" target="n4" />
      <edge source="n4" target="n6" />
      <edge source="n6" target="n5" />
      <edge source="n5" target="n7" />
      <edge source="n6" target="n8" />
      <edge source="n8" target="n7" />
      <edge source="n8" target="n9" />
      <edge source="n8" target="n10" />
   </graph>
</graphml>

I have been able to generate a Tree Layout.

private Supplier<MutableNetwork<Number, Number>> graphFactory;
private Supplier<Number> nodeFactory;
private Supplier<Number> edgeFactory;
private GraphMLReader<MutableNetwork<Number, Number>, Number, Number> gmlreader;

private void initializeTools() throws ParserConfigurationException, SAXException {
    graphFactory =
            () -> NetworkBuilder.directed()
                    .allowsSelfLoops(true)
                    .allowsParallelEdges(true)
                    .build();
    nodeFactory =
            new Supplier<Number>() {
                int n = 0;

                public Number get() {
                    return n++;
                }
            };
    edgeFactory =
            new Supplier<Number>() {
                int n = 0;

                public Number get() {
                    return n++;
                }
            };
    gmlreader =
            new GraphMLReader<>(nodeFactory, edgeFactory);
}

private MutableNetwork<Number, Number> getGraph() {
    MutableNetwork<Number, Number> graph = null;

    String xml =
            "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
                    + "<graphml xmlns=\"http://graphml.graphdrawing.org/xmlns\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" "
                    + "xsi:schemaLocation=\"http://graphml.graphdrawing.org/xmlns http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd\">"
                    + "   <graph id=\"G\" edgedefault=\"undirected\">\n" +
                    "      <node id=\"n0\" />\n" +
                    "      <node id=\"n1\" />\n" +
                    "      <node id=\"n2\" />\n" +
                    "      <node id=\"n3\" />\n" +
                    "      <node id=\"n4\" />\n" +
                    "      <node id=\"n5\" />\n" +
                    "      <node id=\"n6\" />\n" +
                    "      <node id=\"n7\" />\n" +
                    "      <node id=\"n8\" />\n" +
                    "      <node id=\"n9\" />\n" +
                    "      <node id=\"n10\" />\n" +
                    "      <edge source=\"n0\" target=\"n2\" />\n" +
                    "      <edge source=\"n1\" target=\"n2\" />\n" +
                    "      <edge source=\"n2\" target=\"n3\" />\n" +
                    "      <edge source=\"n3\" target=\"n5\" />\n" +
                    "      <edge source=\"n3\" target=\"n4\" />\n" +
                    "      <edge source=\"n4\" target=\"n6\" />\n" +
                    "      <edge source=\"n6\" target=\"n5\" />\n" +
                    "      <edge source=\"n5\" target=\"n7\" />\n" +
                    "      <edge source=\"n6\" target=\"n8\" />\n" +
                    "      <edge source=\"n8\" target=\"n7\" />\n" +
                    "      <edge source=\"n8\" target=\"n9\" />\n" +
                    "      <edge source=\"n8\" target=\"n10\" />\n" +
                    "   </graph>" +
                    "</graphml>";

    BufferedWriter writer = null;
    try {
        writer = new BufferedWriter(new FileWriter("temp.graphml"));
        writer.write(xml);
        writer.close();
        graph = graphFactory.get();
        gmlreader.load("temp.graphml", graph);

    } catch (Exception e) {
        e.printStackTrace();
    }

    return graph;
}

Used as so -

    initializeTools();

    final MutableNetwork<Number, Number> graph = getGraph();

    // create a simple graph for the demo
    TreeLayoutAlgorithm<Number> layoutAlgorithm = new TreeLayoutAlgorithm<>();
    vv = new VisualizationViewer<>(graph, layoutAlgorithm, new Dimension(800, 800));

I can't get it to lay out quite how I'd expect or am trying for. This is how it looks - default tree layout


Solution

  • Here is an implementation of that particular 'tidier' tree layout: tidier tree

    You could probably retro-fit it to the version of jung you are using.