-
Notifications
You must be signed in to change notification settings - Fork 230
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
Link label is not positioned correctly #420
Labels
Comments
facultymatt
changed the title
Link label is not positioned correctly due to element attr incorrectly being used as style property
Link label is not positioned correctly
Jan 6, 2021
Hi @facultymatt , Thank you for reporting this issue. Both your solutions seem to work. Would you like to submit a PR implementing your solution? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
On the link component
textAnchor
is used as a style property like so:<text style={{ textAnchor: "middle" }} {...textProps}>
buttextProps
containsstyle
and thus overwrites thestyle
property fortextAnchor
.react-d3-graph/src/components/link/Link.jsx
Lines 96 to 103 in 0ac8c47
Here
style
gets overwritten bytextProps.style
react-d3-graph/src/components/link/Link.jsx
Line 109 in 0ac8c47
There are two ways to make this work as expected, one is to use
text-anchor
as an attr. See the docs here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchorSecond is to include it in the style object above, so you'd have
To Reproduce
Steps to reproduce the behavior:
renderLabel
and changelabelProperty
tosource
Expected behavior
Expected the label to be centered. Its not because the style usage of
textAnchor
is ignored.Screenshots
Image showing the settings to change
Image showing the labels not centered
Environment:
Additional context
None
The text was updated successfully, but these errors were encountered: