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

Links get disappeared while dragging the nodes #180

kbtganesh opened this issue Mar 8, 2019 · 3 comments


Copy link

@kbtganesh kbtganesh commented Mar 8, 2019

When I drag the node so long, the link cuts in between even though I was doing all these inside the svg container area.

To Reproduce
Steps to reproduce the behaviour:

  1. Create 2 nodes
  2. Link them together
  3. Zoom out to maximum
  4. Click and drag one node to some distance and you can see link gets cut in middle.

Expected behavior
Link line should be visible while dragging


Additional context
It has some other box region inside the actual svg container. Only inside that, the links are visible. And when we drag outside of that box, the part which comes outside alone gets hided. But node was visible though.


  • OS: [Win 10]
  • Browser [Chrome]
  • Node version [v10.15.0]
  • react-d3-graph version [^2.0.0]
  • d3 version [^5.9.1]
  • react version [^16.8.3]

This comment has been minimized.

Copy link

@danielcaldas danielcaldas commented Mar 10, 2019

Thanks for reporting this @kbtganesh, will take a look at it as soon as possible.


This comment has been minimized.

Copy link

@wendymungovan wendymungovan commented Mar 26, 2019

I'm running into the same thing. You can also reproduce the issue by panning the graph by pulling to the right and then dragging the node so it is outside the original width/height area.


This comment has been minimized.

Copy link

@wendymungovan wendymungovan commented Mar 27, 2019

I did a little investigating. I'm not sure how to fix it but this seems to be related to the wrapping svg returned by Link. I think there is a viewbox/viewport issue that we hit when we drag the node outside the original visible region of the larger graph.

<svg>  **<<< This guy**
                  <path {...lineProps} id={id} />
                  {label && (
                      <text style={{ textAnchor: "middle" }} {...textProps}>
                          <textPath href={`#${id}`} startOffset="50%">
wendymungovan added a commit to Barnstorm-Research/react-d3-graph that referenced this issue Mar 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.