How to draw a graph of tree structure (using shapes and lines)?

[Vaibhav]

Hello,

I tried to search this solution in the forum, and I see people asking and replying with solutions to similar situation, but I don't get what I am looking for. Also because I have never tried with graphs before.

So, my problem is, I need a function that takes a string with tree structure, as in automata or tree graph, and displays the nodes in tree form. "Tree" is not important, but important is that each object should be displayed as a node and lines connecting them. Please see the image below (with three possible options):

So, basically, the tree structure could be like X(a, X(a,b), c) where X(a,b) is a sub-tree of higher level X. The program knows the parent-child relationship, so this function only needs to display those elements in a graphical fashion.

I pass the string in the form of a 2D array showing the hierarchy (to simplify).

In the image, I am showing three possible options for showing the tree. The third option eliminates those circles and rectangles, if that simplifies.

I hope I explained clearly.

Thanks ahead!

[mikeporter]

Assuming you passed high school geometry, none of options you pictured would be very difficult using a 2D picture control.

Mike...

[Vaibhav]

Thanks Mike, for the hint and kind words.

Actually I was just thinking with Graph control. Never saw the 2D Picture control. Now exploring ways to plot the trees.

It seems I don't even need the highschool geometry for this. At most the circle radius. Do you think if I can plot those lines and nodes with some formula? At present I am just thinking about alloting a block of around 50 pixels for each node.

[mikeporter]

Yes, with formulas -- and using the box size you are considering as a scaling factor. This will let you resize the drawing by changing just one parameter.

Mike...

[Vaibhav]

Can you give an example please, explaining your point on formulas and changing just one parameter to resize the image?

Thanks for your time.

[mikeporter]

Say you are going to define your drawing in terms of some arbitrary value, we'll call X. The idea is to define all sizes and locations as a function of x.

So, a square would be x pixels by x pixels in size, or the radius of a circle would we 0.5x.

If you wanted the space between rows of circles or squares to be half-again larger than the size of the circles or squares, you would define the distance as 1.5x.

Get the idea?

Mike...

[Vaibhav]

Ah, ok, in that sense.

I was thinking more in the terms of decididng the locations of each node and based on that the lines between the nodes.

I am considering a block of around 50 pixels in height and width for each node (so in your terms, I am keeping x = 50).

But the bigger challenge is about distributing the nodes over a space.

Last night, after writing you, I thought of one way suitable to my data (I am using a 2D array for those trees as in the image).

And I am thinking of traversing from the bottom, and plotting each element going upwards. But the LabVIEW's 2D picture has its origina in top left corner, so I have to first calculate the total blocks I will need, and then calculate the pixels and then start from bottom-up.

But that doesn't sound a very nice way of doing it.

So I am asking if some algebraic solution may help for a better (faster) algorithm. Because in the program, this plotting function will be called many times.

Meanwhile, when I finish the implementation, I will upload it so you can see how I am doing it.

[mikeporter]

I would start drawing from the top. The nodes will be the easy part.

Begin with the root node centered in the drawing area horizontally and against the top of the drawing area. The second row of nodes would be located vertically (as in my example) 1.5x pixels below the first one, and either distributed horizontally across the available drawing area or at a fixed distance - like 1.5x again, or someother distance you define.

The tricky part will be drawing the lines since they need run between the edges of nodes. This is where the high-school geometry might come in.

Keep us posted on what you come up with. Extra points for coming up with a solution that will automatically resize itself to fit the available drawing area! (I've already given you all the clues for how to do that too.)

Mike...

[Yamaeda]

---

@mikeporter wrote:

The tricky part will be drawing the lines since they need run between the edges of nodes. This is where the high-school geometry might come in.

---

Or you draw the boxes/circles after the lines as 2 filled ones, one white a pixel or two smaller. 🙂

/Y