Quantcast
Channel: Northwoods Software - Latest topics
Viewing all articles
Browse latest Browse all 7420

How can I fix my diagram layout problem?

$
0
0

@Giosk wrote:

I’m creating a diagram which is created incrementally adding nodes and links calling my backend api and I’m trying to figure out which layout fits best for my purpose.
I tried two types of layout: the BandedTreeLayout (same as the one found in samples) and the LayeredDigraphLayout.

Case BandedTreeLayout
This is my layout with its options:

      layout: $(BandedTreeLayout, {
        angle: 0,
        arrangement: go.TreeLayout.ArrangementHorizontal,

        treeStyle: go.TreeLayout.StyleLayered,
        alignment: go.TreeLayout.AlignmentCenterChildren,
        nodeSpacing: 20,
        nodeIndent: 0,
        nodeIndentPastParent: 0,
        layerSpacing: 150,
        layerSpacingParentOverlap: 0,
        compaction: go.TreeLayout.CompactionBlock,
        breadthLimit: 0,
        rowSpacing: 20,
        rowIndent: 10,
        setsPortSpot: false,
        setsChildPortSpot: false,
      })

The result is good as you can see in the picture below:

and adding new nodes the result is always good until I add some nodes that are parent and in that case the result isn’t good as you can see in the picture below:

Using this layout is it possible to add parents not at the top of all the diagram, but in a more well-ordered way?

Case LayeredDigraphLayout
This is my layout with its options:

  > layout: $(go.LayeredDigraphLayout, {
    direction: 0,
    layerSpacing: 50,
    columnSpacing: 50,
    cycleRemoveOption: go.LayeredDigraphLayout.CycleGreedy, //.CycleDepthFirst,
    layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
    initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
    aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
    packOption: go.LayeredDigraphLayout.PackAll,

    isRouting: true,

    setsPortSpots: false,
  }),

The result is good except for the links that behave in a very strange way
graph1

and expanding the parents, the new nodes are arranged in a good place, but as I said the links are a mess

This is my link template:

$(
    go.Link,
    {
      routing: go.Link.AvoidsNodes,
      layerName: "Background",
      zOrder: 2,
      corner: 5,
      curve: go.Link.JumpGap,
    },
    $(go.Shape, { strokeWidth: 1.5, stroke: "#A9A9A9" }),
    $(go.Shape, { toArrow: "standard", stroke: null, fill: "#A9A9A9" }),
    $(
      go.TextBlock,
      {
        textAlign: "center",
        font: "9pt helvetica, arial, sans-serif",
        margin: 4,
        segmentIndex: 3,
        segmentFraction: 0.6,
        segmentOffset: new go.Point(0, -5),
      },
      new go.Binding("text", "LinkName"),
      new go.Binding("text", "LinkLabel")
    )
  )

The only thing in the entity template that I think is important to mention is the fromSpot and toSpot

fromSpot: go.Spot.AllSides, 
toSpot: go.Spot.LeftSide,

What can I change in order to obtain a good solution?

Posts: 8

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 7420

Trending Articles