danielcaldas / react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly
https://danielcaldas.github.io/react-d3-graph/sandbox/
MIT License
819 stars 233 forks source link

Link label is not positioned correctly #420

Open facultymatt opened 3 years ago

facultymatt commented 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.

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

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:

  1. Go to https://danielcaldas.github.io/react-d3-graph/sandbox/index.html
  2. Change the link config to enable renderLabel and change labelProperty to source
  3. 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

Screen Shot 2021-01-06 at 5 59 18 AM

Image showing the labels not centered

Screen Shot 2021-01-06 at 5 54 14 AM

Environment:

Additional context None

antoninklopp commented 3 years ago

Hi @facultymatt ,

Thank you for reporting this issue.

Both your solutions seem to work. Would you like to submit a PR implementing your solution?