Looking for a way to style based on a node's position in the hierarchy

[oaklandgit]

Let's say I want to created a hierarchical graph (e.g. an org chart) like so:

I want level 1 nodes to be red, level 2 nodes to be green, and level 3 nodes to be blue.

It seems from the documentation that I would have to individual style each node with a class (e.g. level1, level2, level3) but there ought to be a way to target the "level" directly, without first having to assign a class.

Is this possible? Should it be?

[dwhelan]

That's an interesting idea! One challenging aspect is that AFAIK graphs are implicitly cyclic graphs so the idea of levels doesn't really work in general.

What might work for you would be to use a subGraph for each level placing the relevant nodes into their level.

      graph

      subgraph L1
        1
      end

      subgraph L2
        2a
        2b
        2c
      end

      subgraph L3
        3a
        3b
        3c
        3d
      end
      
      1 --> 2a
      1 --> 2b
      1 --> 2c
      2a --> 3a
      2a --> 3b
      2b --> 3c
      2c --> 3d

You can style subGroups individually by name in CSS styles. You would add the following to your HTML page:

  <style>
    #L1 rect {
      fill: pink !important;
    }
    #L2 rect {
      fill: lightgreen !important;
    }
    #L3 rect {
      fill: lightblue !important;
    }
  </style>

When rendered in a browser you would get: