search

danielcaldas / react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly
https://danielcaldas.github.io/react-d3-graph/sandbox/
MIT License
819 stars 233 forks source link

Marker color isn't set for individually colored links #255

Open halworsen opened 4 years ago

halworsen commented 4 years ago

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: image With link color set to #0000ff in the graph config: image

Environment:

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

danielcaldas commented 4 years ago

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 commented 4 years ago

An enhancement regarding marker's colors was submitted by https://github.com/danielcaldas/react-d3-graph/pull/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 commented 4 years ago

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 commented 4 years ago

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

danielcaldas commented 4 years ago

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