Marker color isn't set for individually colored links

[halworsen]

Describe the bug
When setting link colors in the graph data for directed graphs, the marker/arrowhead's color stays the color that was defined in the global graph config. This also happens when link colors aren't explicitly set in the graph config.

To Reproduce
Steps to reproduce the behavior:

1. Go to the sandbox
2. Tick the directed box
3. In the link.color box, set the color to anything that isn't the default #d3d3d3
4. The links themselves should now be colored, but the markers/arrowheads stay gray

Expected behavior
Markers should update to use the color of the link they're attached to.

Screenshots
With no link color set in the graph config:

With link color set to #0000ff in the graph config:

Environment:

• OS: Windows 10
• Browser: firefox
• Version: 70.0
• Node version: 12.13.0
• react-d3-graph version: 2.3.0
• d3 version: 5.12.0
• react version: 16.11.0

Additional context
The code used to create the graph in the above screenshots is available

[danielcaldas]

Hey, @halworsen thanks a lot for the report! Unfortunately this is the default behavior of the markers. Markers are cached at the first mount of react-d3-graph, afterward the changes in color (unless the highlighted state) won't produce an effect on the marker color, that's why you still get the original marker's colors in the scenario that you described.

I'm open to suggestions that could fix this limitation, but at the current state, consider the marker's colors static.

[danielcaldas]

An enhancement regarding marker's colors was submitted by #361 @chetanladha. I'm aware of this limitation, it has been properly documented now, please bear with us while we're looking into a solution. Pull requests are always welcome! Please feel free to come forward with a proposal in case you might already have some solution in mind.

[halworsen]

I've recently revisited my project to make a few improvements, so this is great timing. My current thoughts are that it might be easier to render and cache markers when individual links are rendered, then build a defs containing the cached markers that are needed in the graph. That way, each individual link can ensure the specific marker they need is rendered, and only markers which are actually being used in the graph would be rendered.

I'm still a little unsure about how to pull off the defs building part, but I'll put up a pull request if I have an a-ha moment. I'm very much a web development novice, and while I'm starting to appreciate the elegance of the renderer code, I'd be lying if I said it didn't leave me a little confused. 😄

[zofbanach]

Hi, are there any updates on this issue? :) I would be very useful.

[danielcaldas]

Hey @zofbanach, I don't have the time to look into this one at the moment. PRs are always welcome 🙂