Is it possible to customize the styling of individual links within a graph

[mdpete4]

I would like to have some links have a specific color and size which are different than the overall layout. Is this possible?

[TathagataChakraborti]

Hi! I was just exploring this library for a graph visualization task. I was wondering if anything has changed since this discussion got opened regarding the styling of links. I was looking to at least change the color of a subset of links.

[amcdnl]

This should be possible but probably not that obvious how to. Can you provide an example of what you are trying to accomplish and maybe i can help point you in the direction?

[TathagataChakraborti]

Hi Austin! 👋 Nice to meet you and thank you very much for the quick response. 🤗

I am part of a team that works on AI planning algorithms and a lot of interfacing problems for planners require drawing graphs. Currently, I am building a tool for helping a user select edges and arrive at their one path (of many in the graph) of choice, except that an algorithm is in charge of recommending edges to select from so that the user can do it faster. I am currently in the process of selecting the best visualization library for this, and that's where I ended up with reagraph (and also reaflow because we have an alternative interface where instead of selecting down the user builds up from scratch). I cannot go into the exact details of what algorithm is inside yet (until we are open source on Jun 30) but I have shared some images below of what the use case is.

I think both reagraph and reaflow would be perfect but since for the selection recommendation and user feedback, all the interaction is on the edges, the ability to modify the edges is crucial for us. Let's take this graph / plan / policy as an example (nodes are states, directed edges are actions that transition between states):

Since these graphs can get pretty complex, without a proactive selection policy, it will take the user lot of time to figure out which edges to pick. So when this graph pops up, I want to highlight and zoom in on a couple of edges like this

Since we can already access a handler for clicking on edges that's no issue. All I need is a way, at the time of rendering the graph to specify what color each edge is, highlight a subset of edges and zoom in.

I tried using the selection method but got stuck with a different issue although that does not really solve the problem since the selection causes the rest of the nodes to become invisible and that is not ideal coz we still want the user to be able to see what else is available. So if there is just an option to color an edge that solves all my life's problems!

[TannerW]

I had a similar question for both vertices and edges while evaluating this library for my use case. Any insights would be useful!

[amcdnl]

You should be able to set size already. I do not think it supports custom link colors based on the data though but shouldn't be difficult to add. We should just want to do something like we did for nodes.

  /**
   * Render a custom node
   */
  renderNode?: NodeRenderer;

and then looks like:

  <GraphCanvas
    nodes={simpleNodes}
    edges={simpleEdges}
    cameraMode="rotate"
    renderNode={({ size, color, opacity }) => (
      <group>
        <mesh>
          <torusKnotGeometry attach="geometry" args={[size, 1.25, 50, 8]} />
          <meshBasicMaterial
            attach="material"
            color={color}
            opacity={opacity}
            transparent
          />
        </mesh>
      </group>
    )}
  />

If anyone is up for it, this would be a good first ticket for someone. I would just add a renderLink function.

[hverlin]

@amcdnl Would you be ok with a PR adding custom colors for edges and nodes?

I would like to add optional attributes color and activeColor to edges and nodes. If not present, they will use the default color from the theme.

[IntegrationGuy]

Is there any update about this topic? Are the optional attributes color/activeColor approved and if yes, when they will be implemented?

[braco]

It would be nice if there were a way to get more control over the line styling, like being able to make dashed lines. This would help to represent different types of relationships.

[braco]

It also seems like its not possible to target specific edges to add or remove their arrow, or really do many kinds of custom stylings on nodes and edges on a case by case basis. This is too bad, it's a pretty important feature

[amcdnl]

I'm happy to accept a pull request.

[mwaterman29]

Anyone currently working on this? Custom colors might be able to handle what I need, but I think a general override would be better.

If not, I am willing to look into creating a PR to create renderEdge, but this is my first project involving threejs, so I'm not sure whether I'd be able to meet the standards for a feature like that, to be honest. That said, I think something that exposes an EdgeRenderer would be good.

For context, I'm working on a representation of the recipes in "Against The Storm" - which is a city-building roguelike video game. I'm using renderNode to load images on top of the graph nodes, as well as draw an outline, depending on some conditions. You can see the WIP here.
Additionally, you can see my code to override node rendering here.

As you can see, the precursors / successors of certain items are highlighted in red and green, respectively. I'd like to highlight edges the same way, but that has a few issues. Even if I wanted to do that via renderNode, clicking on it would select the node that draws the edge highlighting, instead of selecting the edge.

[amcdnl]

@mwaterman29 - This looks nice - thanks for sharing. So there is a complication with the edges which is why this isn't implemented. Edges are the most performance impacting element on the page, when you have 100s it keeps performance of the graph. In order to solve this, we have a special mode for those larger graphs which draws the edges in one thus making a renderEdge function quite difficult to implement. See: #94

[mwaterman29]

That's fair enough.

My initial thought would be to stick it in here:

reagraph/src/symbols/edges/useEdgeGeometry.ts

Line 56 in c95b8c9

edges.forEach(edge => {

, and if there's a EdgeRenderer passed, just use that in the edges foreach.

If that's not viable as you said, is there any way to draw arbitrary things on top of the canvas? I tried to figure it out with the getGraph ref but it didn't seem like what I was looking for.

I already have the node positions cached from the renderNode call, so all I would really need to do is

1. Draw a line from one to the other
2. Add an on-click handler to the new element to update the selections and such.

Is that possible? This might be a more reasonable addition than overwriting edges, as it allows for technically any level of customization, while not having to deal with complaints that 'my edges are too slow!' - i'd suppose they'd know what they're getting into with a carte blanche "drawOnCanvas" type method.

[Vincent-Bdn]

Hello there,
Just here to notify my interest in that feature as well, though I understand that it's not straightforward.
Thanks to the team and I'd be happy to help in any possible way (to be honnest I'm a backend sotware engineer playing around with frontend right now so not quite sure I'm able to handle PR if it's an intricated project, but if I can help somehow I'd love to).

[orangekame3]

maybe, this discussion is resolved with this PR↓

#275