Description
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
.
react-d3-graph/src/components/link/Link.jsx
Lines 96 to 103 in 0ac8c47
Here style
gets overwritten by textProps.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-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:
- Go to https://danielcaldas.github.io/react-d3-graph/sandbox/index.html
- Change the link config to enable
renderLabel
and changelabelProperty
tosource
- See the labels are not centered as expected.
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:
- react-d3-graph version 2.6.0
Additional context
None