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.
|
const textProps = { |
|
dy: -1, |
|
style: { |
|
fill: this.props.fontColor, |
|
fontSize: this.props.fontSize, |
|
fontWeight: this.props.fontWeight, |
|
}, |
|
}; |
Here style gets overwritten by textProps.style
|
<text style={{ textAnchor: "middle" }} {...textProps}> |
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 change labelProperty to source
- 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
Describe the bug
On the link component
textAnchoris used as a style property like so:<text style={{ textAnchor: "middle" }} {...textProps}>buttextPropscontainsstyleand thus overwrites thestyleproperty fortextAnchor.react-d3-graph/src/components/link/Link.jsx
Lines 96 to 103 in 0ac8c47
Here
stylegets overwritten bytextProps.stylereact-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-anchoras 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:
renderLabeland changelabelPropertytosourceExpected behavior
Expected the label to be centered. Its not because the style usage of
textAnchoris ignored.Screenshots
Image showing the settings to change
Image showing the labels not centered

Environment:
Additional context
None