Pass source & target node's data in link Graph callbacks (original: display tooltip with additional data)

[ghpgmer]

Hello @danielcaldas,

not sure if this is already available as a feature or if its a duplicate request. Appreciate your help.

I need to display a tooltip on mouseover / mouseout of a link with data other than source and target. The current methods only take source and target as arguments.

The tooltip needs to display some extra data from the link on mouseover. So I'd imagine a custom-link (just like custom-node) feature is needed to do this.

If there is a solution already to do this (perhaps in a different way), can you please point me to it ?

If not, I wanted to ask this as a feature request.

Thank you for your response.

[danielcaldas]

I think this can be achieve by using existing callbacks onMouseOverLink & onMounseOutLink. It would be best to place a tooltip (e.g., absolute positioning, a component in your app) near the link using the mouse coordinates to compute the tooltip's best positioning.

[ghpgmer]

Thank you for the response. The first thing I tried were the existing callbacks onMouseOverLink and onMouseOutLink. However, they come with predefined arguments of only source and target. I cannot pass any any additional data that I would like to display within those callbacks.

Is there a way to pass additional data to those callbacks ?

[danielcaldas]

Yes, we can work on that. It would be a change similar to the one in https://github.com/danielcaldas/react-d3-graph/pull/385 by @LonelyPrincess. Basically, we could provide in that callback the full node object for the source and target. What do you think about that?

We should also think about forwarding the actual DOM event object from within our Link component.

[ghpgmer]

Yes thank you. It would be great to have entire node object in node callbacks and entire link object in the link callbacks for such custom displays.

Looking forward to the change. Appreciate it.

[danielcaldas]

With this issue, we aim to pass the node's info on our link callbacks. Please drop here a question so that we can discuss the new APIs if you're interested in pick up the issue. Cheers!

[ghpgmer]

Hi @danielcaldas - Just wanted to clarify - can you also pass link info (not just node) - the reason being, there can be data / attributes in link other than the node. The node will be source or target node and they may have their own data / attributes that are different from the link which connects them.

Hope the request is clear. Thanks

[danielcaldas]

Thanks for the clarification @ghpgmer, let's do that and pass the links along as well.