Open facultymatt opened 3 years ago
Describe the bug On the link component textAnchor is used as a style property like so: <text style={{ textAnchor: "middle" }} {...textProps}> but textProps contains style and thus overwrites the style property for textAnchor.
textAnchor
<text style={{ textAnchor: "middle" }} {...textProps}>
textProps
style
https://github.com/danielcaldas/react-d3-graph/blob/0ac8c470c3d6c7e20bf1faf761d449fa753a1b88/src/components/link/Link.jsx#L96-L103
Here style gets overwritten by textProps.style https://github.com/danielcaldas/react-d3-graph/blob/0ac8c470c3d6c7e20bf1faf761d449fa753a1b88/src/components/link/Link.jsx#L109
textProps.style
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-anchor
text-anchor
<text text-anchor="middle" {...textProps}>
Second is to include it in the style object above, so you'd have
const textProps = { dy: -1, style: { fill: this.props.fontColor, fontSize: this.props.fontSize, fontWeight: this.props.fontWeight, textAnchor: 'middle' }, };
To Reproduce Steps to reproduce the behavior:
renderLabel
labelProperty
source
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
Hi @facultymatt ,
Thank you for reporting this issue.
Both your solutions seem to work. Would you like to submit a PR implementing your solution?
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
.https://github.com/danielcaldas/react-d3-graph/blob/0ac8c470c3d6c7e20bf1faf761d449fa753a1b88/src/components/link/Link.jsx#L96-L103
Here
style
gets overwritten bytextProps.style
https://github.com/danielcaldas/react-d3-graph/blob/0ac8c470c3d6c7e20bf1faf761d449fa753a1b88/src/components/link/Link.jsx#L109There 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