Skip to content
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

Open
facultymatt opened this issue Jan 6, 2021 · 1 comment · May be fixed by #486
Open

Link label is not positioned correctly #420

facultymatt opened this issue Jan 6, 2021 · 1 comment · May be fixed by #486

Comments

@facultymatt
Copy link

facultymatt commented Jan 6, 2021

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:

  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:

  • react-d3-graph version 2.6.0

Additional context
None

@facultymatt 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
@antoninklopp
Copy link
Collaborator

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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants