-
Notifications
You must be signed in to change notification settings - Fork 233
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Arrows don't point to nodes as expected #265
Comments
Hey there @antoninklopp thanks for reporting. Although in fact you see the arrows underneath the image in that example, that's not the usual behavior. In the example it happens because the node is manipulated by the client (im this case the example Sandbox integration) to shape the node with some custom elements and there's probably some resizing involved as well. The library core is not aware of this changes thus the arrows being rendered under the node... Not really sure if there's an workaround... Maybe manipulating the arrow with a css class that would override the default spacing, but that's a huge hack. What do you think of an approach where we expose a property that tells react-d3-graph how far the arrow should be placed from the node @LonelyPrincess? |
What I don't really get is that, in my example, I'm drawing a simple circle with a div with 50% border and 100% width and height. With these information, the library should be aware of the form and size of my object, but the arrow still lies under my object. I think that this would be really cool to be able to customize all this personally. |
Hi @danielcaldas , After investing a bit where we could add this in the code, I think that the right place is here With adding and subtracting the size * unit_vector of linked nodes we could have better results for arrows. var x1 = nodes?.[source]?.x || 0;
var y1 = nodes?.[source]?.y || 0;
var x2 = nodes?.[target]?.x || 0;
var y2 = nodes?.[target]?.y || 0;
let dirx1x2 = x2 - x1;
let diry1y2 = y2 - y1;
let norm = dirx1x2 * dirx1x2 + diry1y2 * diry1y2;
dirx1x2 /= norm;
diry1y2 /= norm;
x1 += config.node.size * dirx1x2;
x2 -= config.node.size * dirx1x2;
y1 += config.node.size * diry1y2;
y2 -= config.node.size * diry1y2; The less complicated maths are for the circle of course, but I think it could be great to adapt it for every supported form. |
That could be an approach and it looks very promising, we could potentially set it up only from circles and slowly increment from there 👍 |
was this launched already? |
Hi @emersondflopes, I'll close the issue while this is not released. The PR was merged, we just need to adjust a few things before releasing this together with a bunch of other features & bug fixes. Stay stunned. edit cc @emersondflopes this feature is available with the latest version react-d3-graph@2.5.0 |
Describe the bug
The arrows when directed is checked and they are either before the element or after.
To Reproduce
Steps to reproduce the behavior:
Check the sandbox example with this directed checked. The arrows are behind the images.
Expected behavior
The arrows should point onto the element
Environment:
I don't see if this customizable, even after I've read the doc carefully. If this is not a bug and I can change the arrow by passing props that I want, please tell me !
Thanks
The text was updated successfully, but these errors were encountered: