GraphSharp 树布局 LeftToRight

Question

我尝试使用 CodePlex 中的 GraphSharp 创建一棵树。

我查看了示例应用程序并尝试“重新设计”示例。

问题是，如果我尝试以编程方式设置 LayoutAlgorithmType = "Tree"，我会得到一个 TargetInvocationException... 这很神秘，因为在示例中它有效。

我的问题是：如何创建一个具有从左到右的树布局和方向的图表。

提前致谢:)

我的代码：

public partial class MainWindow : Window
{
    private IBidirectionalGraph<object, IEdge<object>> _graphToVisualize;

    public IBidirectionalGraph<object, IEdge<object>> GraphToVisualize
    {
        get { return _graphToVisualize; }
    }

    public MainWindow()
    {
        CreateGraphToVisualize();

        InitializeComponent();
    }

    private void CreateGraphToVisualize()
    {
        var g = new BidirectionalGraph<object, IEdge<object>>();



        string[] vs = new string[5];
        for (int i = 0; i < 5; i++)
        {
            vs[i] = i.ToString();
            g.AddVertex(vs[i]);
        }

        //add some edges
        g.AddEdge(new Edge<object>(vs[0], vs[1]));
        g.AddEdge(new Edge<object>(vs[0], vs[2]));
        g.AddEdge(new Edge<object>(vs[2], vs[3]));
        g.AddEdge(new Edge<object>(vs[1], vs[4]));
        g.AddEdge(new Edge<object>(vs[3], vs[4]));

        layout.LayoutMode = LayoutMode.Automatic;
        layout.LayoutAlgorithmType = "Tree";

        _graphToVisualize = g;

    }
}

xaml:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:graphsharp="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:GraphSharp_Controls="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:graph="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:Controls="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions"

        Title="MainWindow" Height="350" Width="525"
        x:Name="root">

    <Grid>
        <Controls:ZoomControl>
            <graph:GraphLayout x:Name="layout" />
        </Controls:ZoomControl>

    </Grid>
</Window>

Answer 1

看了graph#lib的源码后，自己找到了解决办法。

首先你必须将 LayoutAlgorithm 添加到你的命名空间：

xmlns:tree="clr-namespace:GraphSharp.Algorithms.Layout.Simple.Tree;assembly=GraphSharp"

之后，您可以向 GraphLayout 添加额外的 LayoutParameter。就我而言，我只是将 Tree 的方向从 TopToBottom 更改为 LeftToRight。

<graphsharp:GraphLayout x:Name="graphLayout"
                                Graph="{Binding ElementName=root,Path=GraphToVisualize}"
                                LayoutAlgorithmType="Tree"
                                OverlapRemovalAlgorithmType="FSA"
                                HighlightAlgorithmType="Simple" RenderTransformOrigin="0.5,0.5">
            <graphsharp:GraphLayout.LayoutParameters>
                <tree:SimpleTreeLayoutParameters Direction="LeftToRight"></tree:SimpleTreeLayoutParameters>
            </graphsharp:GraphLayout.LayoutParameters>
        </graphsharp:GraphLayout>

因此，如果您想更改图形的参数，您必须查看（例如在 Visual Studio 的解决方案资源管理器中）算法 .->Layout->Simple->Tree -> SimpleTreeLayoutParameters 在我的情况下。

Answer 2

在代码中：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void root_Loaded(object sender, RoutedEventArgs e)
    {
        CreateGraphToVisualize();
    }

    private void CreateGraphToVisualize()
    {
        var g = new BidirectionalGraph<object, IEdge<object>>();
        string[] vs = new string[5];
        for (int i = 0; i < 5; i++)
        {
            vs[i] = i.ToString();
            g.AddVertex(vs[i]);
        }

        //add some edges
        g.AddEdge(new Edge<object>(vs[0], vs[1]));
        g.AddEdge(new Edge<object>(vs[0], vs[2]));
        g.AddEdge(new Edge<object>(vs[2], vs[3]));
        g.AddEdge(new Edge<object>(vs[1], vs[4]));
        g.AddEdge(new Edge<object>(vs[3], vs[4]));

        //Simple Tree layout parameter variable
        GraphSharp.Algorithms.Layout.Simple.Tree.SimpleTreeLayoutParameters simpleTreeLayoutParameters = new GraphSharp.Algorithms.Layout.Simple.Tree.SimpleTreeLayoutParameters();
        //Simple Tree layout parameter variable values
        simpleTreeLayoutParameters.Direction = GraphSharp.Algorithms.Layout.LayoutDirection.LeftToRight; //THIS IS WHAT YOU EXPECT
        simpleTreeLayoutParameters.LayerGap = 10.0;
        simpleTreeLayoutParameters.OptimizeWidthAndHeight = false;
        simpleTreeLayoutParameters.SpanningTreeGeneration = GraphSharp.Algorithms.Layout.Simple.Tree.SpanningTreeGeneration.DFS;
        simpleTreeLayoutParameters.VertexGap = 10.0;
        simpleTreeLayoutParameters.WidthPerHeight = 2.0;
        //Set layout
        layout.LayoutAlgorithmType = "Tree";
        layout.LayoutParameters = simpleTreeLayoutParameters;
        layout.LayoutMode = LayoutMode.Automatic;
        layout.Graph = g;
    }
}