Links get disappeared while dragging the nodes

[kbtganesh]

Description
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.

Environment:

• 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]

[danielcaldas]

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

[wendymungovan]

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.

[wendymungovan]

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%">
                              {label}
                          </textPath>
                      </text>
                  )}
              </svg>