Showing hierarchical and organizational relationships with topological graphs (i)

Most topological diagram interfaces have the need to display "tiered rendering." A complex system or organization, there will be many different levels of nodes and connection relationships. How to use the graphic relatively clear presentation, is a need to constantly explore the topic.

There are a number of ways to show "Twaver" in the first way:

1, with group network tuple display.
The group network tuple is the display of some network elements in a group. This group can be expanded and closed by double-clicking. In the closed state, it is no different from a normal network element: There are positions, icons, and actions. When you double-click it, it will show the child inside, and become an "area" covering all the children, the shape may be round, square, etc. Others call it "local expansion." Such as:

2, with subnetwork subnet display.
Subnetwork can be used to display a subordinate network, double-click to enter a new scene (including topology map, map, etc.), and the current data will be completely no longer displayed. This is similar to commonly said data "drill down" or "Drill Down" (Drill down). A subnet looks like a regular node, and when you double-click it, all children are displayed in a new scene on the graph. Unlike group, it is not a "local expansion" but a "next-level expansion". Such as:

3, with a single-layer connection to present.
When it comes to "grading," it's easy to think of "group" or "subnet". In fact, a lot of things do not have to use these elements. In many cases, what we need to express is simply a "hierarchical" relationship. And this kind of relationship can be expressed at one level with the connection. For example, a multi-company, multi-sector, multi-step business process can be rendered in a similar way:

This diagram can be used to display different levels and relationships without using a group, and it is easier to see the "cross-level" connections and global relationships. There may be more "sub-processes" within the organization, which we can display with a network tuple:

When there are more connections, there may be a lot of intersections, and you can use Twaver's automatic layout to actively intervene to make the graphics clearer:

But the automatic layout also avoids the cross appearance, some graphic structure decides that it must have the intersection. At this point, you can also find ways to make the diagram more clear, such as through the mouse over the automatic highlighting related lines:

Of course, use Twaver to try to provide the excellent features. For example, using vectors to depict, there is no need to write how much code, and the user is not afraid of hard amplification resulting in unsightly distortion:

To sum up, we can flexibly use the plane topology diagram, to show the world of various "layered" logic, without necessarily using the so-called grouping, drill down and other characteristics. Simple, a clear and pleasant flowchart. Readers who need the source code can send us a direct email to request it.

Request code please contact [email protected]

Showing hierarchical and organizational relationships with topological graphs (i)