Class ForceDirectedTreeLayoutSettings

Represents settings for configuring the force directed tree layout in a diagram.

Inheritance

object

ForceDirectedTreeLayoutSettings

Inherited Members

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class ForceDirectedTreeLayoutSettings

Remarks

The ForceDirectedTreeLayoutSettings class is used to customize how nodes are arranged within a diagram using a force directed tree layout algorithm. This includes adjusting properties such as repulsion strength, attraction strength, connector length, and maximum iterations to achieve the desired visual arrangement.

Examples

This example demonstrates how to initialize a force directed tree layout settings.

<SfDiagramComponent @ref="diagram" Width="1200px" Height="800px" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
    <Layout Type="LayoutType.ForceDirectedTree" ForceDirectedSettings="@ForceDirectedSettings">
    </Layout>
</SfDiagramComponent>
@code
{
    ForceDirectedTreeLayoutSettings ForceDirectedSettings = new ForceDirectedTreeLayoutSettings()
    {
        AttractionStrength = 0.8,
        ConnectorLength = 100,
        RepulsionStrength = 5000,
        MaximumIteration = 200
    };
}

Constructors

ForceDirectedTreeLayoutSettings()

Declaration

public ForceDirectedTreeLayoutSettings()

Properties

AttractionStrength

Gets or sets the strength of the attractive force that pulls connected nodes toward each other.

Declaration

public double AttractionStrength { get; set; }

Property Value

Type	Description
double	A double indicating the attraction strength. The default value is 0.5. Minimum value is 0 and Maximum value is 1.

Remarks

The attraction strength determines how strongly connected nodes are pulled toward each other.
Higher values will result in tighter clustering of directly connected nodes, emphasizing their relationships.

Examples

This example demonstrates how to initialize AttractionStrength in force-directed tree layout settings.

<SfDiagramComponent @ref="diagram" Width="1200px" Height="800px" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
    <Layout Type="LayoutType.ForceDirectedTree" ForceDirectedSettings="@ForceDirectedSettings">
    </Layout>
</SfDiagramComponent>
@code
{
    ForceDirectedTreeLayoutSettings ForceDirectedSettings = new ForceDirectedTreeLayoutSettings()
    {
        AttractionStrength = 0.8
    };
}

ConnectorLength

Gets or sets the length of the connectors used in the layout.

Declaration

public double ConnectorLength { get; set; }

Property Value

Type	Description
double	A double that represents the desired connector length. The default value is 50. Minimum value is 30.

Remarks

Increasing this value will create more space between connected nodes, making the overall graph more spread out. Decreasing it will make the layout more compact.

Examples

This example demonstrates how to initialize ConnectorLength in force-directed tree layout settings.

<SfDiagramComponent @ref="diagram" Width="1200px" Height="800px" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
    <Layout Type="LayoutType.ForceDirectedTree" ForceDirectedSettings="@ForceDirectedSettings">
    </Layout>
</SfDiagramComponent>
@code
{
    ForceDirectedTreeLayoutSettings ForceDirectedSettings = new ForceDirectedTreeLayoutSettings()
    {
        ConnectorLength = 150
    };
}

MaximumIteration

Gets or sets the maximum number of iterations the simulation will run before stopping.

Declaration

public int MaximumIteration { get; set; }

Property Value

Type	Description
int	An int representing the total number of iterations. The default value is 300. Minimum value is 100.

Remarks

The force-directed layout is an iterative process. A higher number of iterations can lead to a more stable and aesthetically pleasing layout but will increase the computation time. A lower value provides faster rendering at the cost of potential layout quality.

Examples

This example demonstrates how to initialize MaximumIteration in force-directed tree layout settings.

<SfDiagramComponent @ref="diagram" Width="1200px" Height="800px" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
    <Layout Type="LayoutType.ForceDirectedTree" ForceDirectedSettings="@ForceDirectedSettings">
    </Layout>
</SfDiagramComponent>
@code
{
    ForceDirectedTreeLayoutSettings ForceDirectedSettings = new ForceDirectedTreeLayoutSettings()
    {
        MaximumIteration = 200
    };
}

RepulsionStrength

Gets or sets the strength of the repulsive force that pushes all nodes away from each other.

Declaration

public int RepulsionStrength { get; set; }

Property Value

Type	Description
int	An int indicating the strength of the repulsion. The default value is 5000. Minimum value is 3000.

Remarks

This is the primary force responsible for preventing nodes from overlapping. Increasing this value will create more white space around all nodes, globally pushing them apart.

Examples

This example demonstrates how to initialize RepulsionStrength in force-directed tree layout settings.

<SfDiagramComponent @ref="diagram" Width="1200px" Height="800px" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
    <Layout Type="LayoutType.ForceDirectedTree" ForceDirectedSettings="@ForceDirectedSettings">
    </Layout>
</SfDiagramComponent>
@code
{
    ForceDirectedTreeLayoutSettings ForceDirectedSettings = new ForceDirectedTreeLayoutSettings()
    {
        RepulsionStrength = 8000
    };
}