microsoft / microsoft/automatic-graph-layout

SVG Writer Adding Space

Open
#185 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C#
Stars
1.5k
Forks
319
Avg merge
38m
Merged PRs (30d)
1

Description

When using the sample but changing the layer direction to bottom->top it becomes apparent that there is a large chunk of extra space generated in the svg. The height properity of the SVG is almost double the height of the contained data.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="79.79687309265" height="480.87498474121" id="svg2" version="1.1"> <g transform="translate(79.7968730926514,250.437492370605)"> ... </g> </svg>

Removing the hard coded height and width and setting the 2nd part of the translate to 0 in the svg fixes the issue for me.

        Graph graph = new Graph();
        graph.AddEdge("47", "58");
        graph.AddEdge("70", "71");

        var subgraph = new Subgraph("subgraph1");
        graph.RootSubgraph.AddSubgraph(subgraph);
        subgraph.AddNode(graph.FindNode("47"));
        subgraph.AddNode(graph.FindNode("58"));

        var subgraph2 = new Subgraph("subgraph2");
        subgraph2.Attr.Color = Color.Black;
        subgraph2.Attr.FillColor = Color.Yellow;
        subgraph2.AddNode(graph.FindNode("70"));
        subgraph2.AddNode(graph.FindNode("71"));
        subgraph.AddSubgraph(subgraph2);
        graph.AddEdge("58", subgraph2.Id);
        graph.Attr.LayerDirection = LayerDirection.BT;

        var gr = new GraphRenderer(graph);            
        gr.CalculateLayout();

        using (var stream = File.Create(Path.Combine(Directory.GetCurrentDirectory(), @"example.svg")))
        {
            var writer = new SvgGraphWriter(stream, graph)
            {
                BlackAndWhite = false,
                AllowedToWriteUri = true,                   
            };
            writer.Write();               
        }

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the sample code in the issue, especially GraphRenderer.CalculateLayout and SvgGraphWriter.Write, and reproduce the output with LayerDirection.BT. Compare the SVG bounds and transform with the contained graph; done means the generated SVG does not include the reported excess vertical space.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.